当前位置: 首页 > 面试题库 >

Angular.js:$ state.current.name是某个值时的ng-show元素

闻人凯泽
2023-03-14
问题内容

我希望仅在$state.current.nameequals 时显示一块HTML
about.list。到目前为止,我有以下代码,但是根据状态,它似乎并未切换元素。

index.html

<nav class="global-navigation">
    <ul class="list">
    <li class="list-item">
      <a class="list-item-link" ui-sref="home">
        Home
      </a>
    </li>
    <li class="list-item">
      <a class="list-item-link" ui-sref="about">
        About
      </a>
    </li>
     <li class="list-item" ng-show="$state.current.name == 'about.list'">
      <a class="list-item-link" ui-sref="about.list">
        List
      </a>
    </li>
    </ul>
  </nav>

app.js

var myApp = angular.module('myApp', ['ui.router'])

  .config(['$urlRouterProvider', '$stateProvider',

    function($urlRouterProvider, $stateProvider) {

    $urlRouterProvider.otherwise('/404.html');

    $stateProvider.

      // Home
      state('home', {
        url: '/',
        templateUrl: 'partials/_home.html',
        controller: 'homeCtrl'
      }).

      // About
      state('about', {
        url: '/about',
        templateUrl: 'partials/_about.html',
        controller: 'aboutCtrl'
      }).

      // About List
      state('about.list', {
        url: '/list',
        controller: 'aboutCtrl',
        templateUrl: 'partials/_about.list.html',
        views: {
          'list': { templateUrl: 'partials/_about.list.html' }
        }
      });

  }]

);

问题答案:

要么

JS

.run(function ($state,$rootScope) {
    $rootScope.$state = $state;
})

HTML

data-ng-show="$state.includes('about.list')"


 类似资料:
  • 问题内容: 但是,这实际上只是一种变通方法,它实际上并未解决核心问题,即:如何在没有包装的情况下跨多个元素使用ng-repeat? 例如,jquery.accordion要求您重复h3和div元素,那么如何用ng-repeat做到这一点? 问题答案: 现在,我们对此有适当的支持,请参阅: AngularJs提交 通过此更改,您现在可以执行以下操作:

  • 问题内容: 我在angular.js中有指令/类或问题。 Chrome可以正常运行,但是Firefox会通过或导致元素闪烁。恕我直言,它是由引起的转换/ 到,可能是Firefox的JavaScript编译器是有点慢,所以元素出现了一会儿,然后躲起来? 例: 问题答案: 尽管文档中没有提到它,但是将规则添加到CSS 可能还不够。如果您要在主体中加载angular.js或模板编译得不够快,请使用指令,

  • 问题内容: 我将Angular.js用于通过隐藏trs通过显示tr并在下面的td中将div向下滑动来模拟滑出效果的应用程序。遍历这些行的数组时,此过程可以使用knockout.js出色地工作,因为我可以在两个tr元素之间使用。 使用angular时,必须将其应用于html元素,这意味着我似乎无法使用标准方法来重复这些双行。我对此的第一个响应是创建一个表示这些double tr的指令,但是由于指令模

  • 问题内容: 我正在使用ng-pattern来验证某些表单字段,并且正在使用ng-change来监视和处理任何更改,但是ng-change(或$ scope。$ watch)仅在form元素位于$有效状态!我对angular还是陌生的,所以我不知道如何解决这个问题,尽管我怀疑应该采用新的指令。 在ng-pattern仍然像以前一样设置表单元素状态的情况下,如何在$ invalid和$ valid表单

  • 我知道和会影响元素上的类集,并且控制元素是否呈现为DOM的一部分。 是否有关于选择ng(如果)而不是ng(显示)或ng(隐藏)的指南?

  • 问题内容: 我了解这一点,并会影响在元素上设置的类,并控制是否将元素呈现为DOM的一部分。 有没有对选择的准则在/ 或反之亦然? 问题答案: 取决于您的用例,但总结不同之处: 将从DOM中删除元素。这意味着您所有的处理程序或所有附加到这些元素的内容都将丢失。例如,如果将单击处理程序绑定到子元素之一,则将其评估为false时,将从DOM中删除该元素,并且即使稍后将其评估为true并显示该元素,您的单