是否可以使用 ng 类将值插入到类名?

Question

是否可以将值插入到带有ng-class的类名？ 我什至不确定在 AngularJS 1.6 中是否可行

所以例如：

<section id=“section-1”>
<p class=“myclass-1”>help</p>
</section>
<section id=“section-2”>
<p class=“myclass-2”>help</p>
</section>
<section id=“section-2”>
<p class=“myclass-2”>help</p>
</section>

我尝试了以下显然不起作用的方法。

<div ng-repeat="item in $ctrl.somethings">
<section id="section-{{$index}}">
<p ng-class="{'my class-{{index}}': $ctrl.name==='examplething' && $index==={{index}} }">
help
</p>
</section>
</div>

Answer 1

无需在ng-class中使用插值，因为它是一个角度指令。

<p class="my" ng-class="{ ($ctrl.name==='examplething' && $index=== index) ? 'class-' + index : ''}" >help</p>

Answer 2

ng-class指令需要使用字符串形式：

div ng-repeat="item in $ctrl.somethings">
<section id="section-{{$index}}">
<p ng-class="(condition) ? 'myclass-'+$index : '' ">
help
</p>
</section>
</div> 

从文档中：

为什么混合插值和表达式是一种不好的做法：

• 它增加了标记的复杂性
• 不能保证它适用于每个指令，因为插值本身就是一个指令。如果另一个指令在插值运行之前访问属性数据，它将获取原始插值标记而不是数据。
• 它会影响性能，因为插值会向范围添加另一个观察程序。
• 由于这不是推荐的用法，因此我们不会对此进行测试，并且对 AngularJS 核心的更改可能会破坏您的代码。

— AngularJS 开发人员指南 - 混合插值和表达式

Answer 3

您可以尝试以下代码，也请检查此 plunker 以及针对您给定场景的工作示例。

模板：

<div ng-repeat="item in somethings">
<section id="section-{{$index+1}}">
<p ng-class="{'myclass-{{$index+1}}': (item.value==='World{{$index+1}}' && $index==={{$index}}) }">help</p>
</section>
</div>

控制器：

$scope.somethings = [{value: 'World1'}, {value: 'World2'}, {value: 'World3'}];