Wie kann ich ein Scope-Objekt in einer ng-Class-Direktive auswerten?

Question

Ich habe eine Schaltfläche, die beim Klicken auf das nächste indizierte Element in einem Array erhöht wird. Wenn ich das letzte Element im Array erreiche, möchte ich eine Klasse zum Button-Tag namens "endButton" hinzufügen.

Die Art, wie ich den Ausdruck auszuwerten beabsichtige nur den HTML-Code, wo ich denke, es ist am besten, die ng-Klasse-Direktive zu verwenden. Ich möchte einen Ausdruck auswerten, der, wenn er wahr ist, die Klasse "endButton" hinzufügt.

Ich habe die folgende Syntax versucht:

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

Dies gibt den Umfang Objekt als String-Wert, so dass es nicht funktioniert. Ich habe die doppelten geschweiften Klammern um den myArray.Index eingefügt, aber es ergibt auch eine Zeichenkette.

Eine Idee, wie ich ein Oszilloskop-Objekt in einer ng-Class-Direktive bewerten kann?

Answer 1

Jeder Ausdruck für eine ng-Direktive befindet sich bereits im Kontext der Variablen scope, auf die Sie nicht verweisen müssen. Ich bin mir nicht sicher, was $ scope.myArray.Index ist aber ich vermute, es der Index ist, dass Sie bis zu sind, so sollten Sie in der Lage sein, um es einfach zu myArray.Index == 10

zu ändern

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

Hier ist

ein jsfiddle Beispiel, bitte beachten Sie, ich nicht das Array enthalten sind,

https://jsfiddle.net/e16v9avj/

Answer 2

Sie sind nicht zu weit weg von dem, was Sie suchen. Ich glaube, es ist mit Ihrem Parsing von ganzen Zahlen und Strings. Hier ist ein funktionierendes Beispiel

.red { color: red }

<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>

Answer 3

Vielleicht ist das, was Sie suchen:

jsfiddle: here

<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>