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 Developer Guide - mixing interpolation and expressions

Answer 3

您可以尝试类似以下代码的方法，也请根据您给定方案的工作示例检查this 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'}];

是否可以使用ng-class将值插值到类名？

3 个答案:

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