2016-07-29 5 views
0

ボタンをクリックすると、配列内の次のインデックス項目にインクリメントします。配列の最後の項目に到達すると、 "endButton"というボタンタグにクラスを追加します。ng-Classディレクティブでスコープオブジェクトを評価する方法は?

私が表現を評価する方法は、ng-classディレクティブを使うのが最善だと思うhtmlコードだけです。私は式を評価したい、本当に "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ディレクティブでスコープオブジェクトをどのように評価することができますか?

答えて

0

ng-directiveの任意の式はすでにスコープ変数のコンテキスト内にあるため、参照する必要はありません。私は$ scope.myArray.Indexが何であるかわからないが、私はそれはあなたが次第だインデックスだ推測しているので、あなただけのmyArray.Index ==にそれを変更することができるはず10

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

はjsfiddle例ですが、私はあなたがあまりにも遠く、あなたが探して何からじゃない配列

https://jsfiddle.net/e16v9avj/

0

が含まれていない注意してください。私はそれがあなたの整数と文字列の解析にあると信じています。

jsfiddle:ここでは実施例

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

0

は多分これはあなたが探しているものであるだ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> 
関連する問題