假设你有一个在ul中呈现的数组,每个元素都有一个li,控制器上有一个名为selectedIndex的属性。在AngularJS中,用索引selectedIndex向li中添加类的最好方法是什么?

我目前复制(手工)li代码,并将类添加到li标记之一,并使用ng-show和ng-hide只显示每个索引一个li。


当前回答

我最喜欢的方法是使用三元表达式。

ng-class="condition ? 'trueClass' : 'falseClass'"

注意:如果你使用的是旧版本的Angular,你应该使用这个,

ng-class="condition && 'trueClass' || 'falseClass'"

其他回答

如果你正在使用angular pre v1.1.5(即没有三元操作符),并且你仍然想要在这两种情况下使用等效的方法来设置值,你可以这样做:

ng-class="{'class1':item.isReadOnly == false, 'class2':item.isReadOnly == true}"

如果你有一个应用于很多元素的公共类,你可以创建一个自定义指令来添加这个类,比如ng-show/ng-hide。

这个指令会在按钮被点击时添加类'active'

module.directive('ngActive',  ['$animate', function($animate) {
  return function(scope, element, attr) {
    scope.$watch(attr.ngActive, function ngActiveWatchAction(value){
      $animate[value ? 'addClass' : 'removeClass'](element, 'active');
    });
  };
}]);

更多信息

这是我在工作中多次有条件的判断:

<li ng-repeat='eOption in exam.examOptions' ng-class="exam.examTitle.ANSWER_COM==exam.examTitle.RIGHT_ANSWER?(eOption.eoSequence==exam.examTitle.ANSWER_COM?'right':''):eOption.eoSequence==exam.examTitle.ANSWER_COM?'wrong':eOption.eoSequence==exam.examTitle.RIGHT_ANSWER?'right':''">
  <strong>{{eOption.eoSequence}}</strong> &nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;
  <span ng-bind-html="eOption.eoName | to_trusted">2020 元</span>
</li>

部分

  <div class="col-md-4 text-right">
      <a ng-class="campaign_range === 'thismonth' ? 'btn btn-blue' :  'btn btn-link'" href="#" ng-click='change_range("thismonth")'>This Month</a>
      <a ng-class="campaign_range === 'all' ? 'btn btn-blue' :  'btn btn-link'" href="#" ng-click='change_range("all")'>All Time</a>
  </div>

控制器

  $scope.campaign_range = "all";
  $scope.change_range = function(range) { 
        if (range === "all")
        {
            $scope.campaign_range = "all"
        }
        else
        {  
            $scope.campaign_range = "thismonth"
        }
  };

我最近做的是这样的:

<input type="password"  placeholder="Enter your password"
ng-class="{true: 'form-control isActive', false: 'isNotActive'}[isShowing]">

isshows值是位于我的控制器上的值,可以通过单击按钮进行切换,单括号之间的部分是我在css文件中创建的类。

编辑:我还想补充一点,codeschool.com有一个免费的课程,由谷歌赞助,在AngularJS上,涵盖了所有这些东西。不需要支付任何东西,只是注册一个帐户,然后开始! 祝大家好运!