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

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


当前回答

我最近做的是这样的:

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

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

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

其他回答

下面是另一个在ng-class不能使用时工作得很好的选项(例如在样式化SVG时):

ng-attr-class="{{someBoolean && 'class-when-true' || 'class-when-false' }}"

(我认为你需要使用最新的不稳定Angular才能使用ng-attr-,我目前使用的是1.1.4)

这可能会被否决,但下面是我如何使用1.1.5的三元操作符来切换类,取决于表中的一行是第一行、中间一行还是最后一行——除非表中只有一行:

<span class="attribute-row" ng-class="(restaurant.Attributes.length === 1) || ($first ? 'attribute-first-row': false || $middle ? 'attribute-middle-row': false || $last ? 'attribute-last-row': false)">
</span>

只是添加了一些对我来说有用的东西,经过大量的搜索……

<div class="form-group" ng-class="{true: 'has-error'}[ctrl.submitted && myForm.myField.$error.required]">

希望这有助于您的成功开发。

=)

无文档的表达式语法:伟大的网站链接…=)

Ng-class支持必须求值为任意一个的表达式

以空格分隔的类名字符串,或者 类名数组,或 类名到布尔值的映射/对象。

因此,使用表单3,我们可以简单地写

ng-class="{'selected': $index==selectedIndex}"

参见如何在AngularJS中有条件地应用CSS样式?更广泛的答案。


更新:Angular 1.1.5增加了对三元操作符的支持,所以如果你对这个结构更熟悉的话:

ng-class="($index==selectedIndex) ? 'selected' : ''"

部分

  <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"
        }
  };