javascript - AngularJS - 如何添加多个 ng-class 指令?

标签 javascript angularjs ng-class

以下是使用 ng-class 的两种不同方式指示。我需要它们,在同一个元素上,但这不起作用。

在 ng-class 中使用对象

http://plnkr.co/edit/uZNK7I?p=preview

<div ng-repeat="item in [1, 2, 3, 4, 5]" 
     ng-class="{ first: $first, last: $last }">{{item}}</div>

正确导致
<div class="first">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div class="last">5</div>

在 ng-class 中使用表达式

http://plnkr.co/edit/tp6lgR?p=preview
<div ng-repeat="item in [1, 2, 3, 4, 5]" 
     ng-class=" 'count-' + ($index + 1) ">{{item}}</div>

正确导致
<div class="count-1">1</div>
<div class="count-2">2</div>
<div class="count-3">3</div>
<div class="count-4">4</div>
<div class="count-5">5</div>

现在,一起使用它们怎么样?

我需要动态类名(如 'count-' + n ),但还需要多个类的对象语法。

我不能只使用 2 ng-class属性( http://plnkr.co/edit/OLaYke?p=preview ),只有第一个有效。

有什么建议么?

最佳答案

你不应该使用 ng-class对于第二个,使用

<div class="count-{{$index + 1}}" ng-class="{ first: $first, last: $last }">

关于javascript - AngularJS - 如何添加多个 ng-class 指令?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22721390/

相关文章:

javascript - 如何让 React Native 的 ScrollView 初始缩放不为 1?

javascript - document.createElement();有我可以创建的元素列表吗?

javascript - 重新编译文档中新加载的正文元素 - Angular

AngularJS ng-repeat 设置默认选择值

css - AngularJS:当过滤器没有返回结果时应用 css 类

javascript - 带 Handlebars 的 nodemailer 无法正确显示样式

javascript - 在 JavaScript 中设置 CSS 属性?

javascript - 如何获取 Bootstrap File Input 插件创建的图像数据

angularjs - ng-class 如果对象存在

javascript - ng-class 未调用 Angularjs Scope 方法