Question

我有一个按钮，单击该按钮会增加到数组中的下一个索引项。当我到达数组中的最后一项时，我想在名为“endButton”的按钮标记中添加一个类。

我打算评估表达式的方式只涉及html代码，我认为最好使用ng-class指令。我想评估一个表达式，当为true时，添加“endButton”类。

我尝试了以下语法：

<button type="button" class="right-btn col-xs-6" role="menuitem" ng-click="clickNext()" ng-class="{'endButton' : scope.myArray.Index === 10}">Next</button>

这会将范围对象作为字符串值返回，因此不起作用。我在myArray.Index周围加了两个大括号，但它也产生了一个字符串。

我知道如何评估ng-class指令中的范围对象吗？

Answer 1

ng-directive的任何表达式都已在scope变量的上下文中，您不需要引用它。我不确定$ scope.myArray.Index是什么，但我猜测它是你所依据的索引，所以你应该能够将它改为myArray。指数== 10

<button type="button" class="right-btn col-xs-6" role="menuitem" ng-click="clickNext()" ng-class="{'endButton' : index === 10}">Next</button>

这是一个小例子，请注意我还没有包含数组

https://jsfiddle.net/e16v9avj/

Answer 2

你离你想要的东西不太远。我相信你对整数和字符串的解析。这是一个有效的例子

＆＃13;

.red { color: red }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>

<div ng-app ng-init="ctr=0">
  <p ng-class="{red: ctr===3}">{{ctr}}<p>
  <button ng-click="ctr=ctr+1">
    Click Me
  </button>
</div>

＆＃13;

Answer 3

您可以使用$last代替检查索引。请参阅JsFiddle并使用ng-class="{'endButton' : $last}"

进行演示

<div ng-app="test" ng-controller="testController">
  {{index}}
  <div ng-repeat="element in array">
     <div>{{element}}</div>
     <button type="button" class="right-btn col-xs-6" role="menuitem"
         ng-click="clickNext()" ng-class="{'endButton' : $last}">Next</button>
  </div>
</div>

我如何评估ng-Class指令中的范围对象？

3 个答案: