AngularJSとブートストラップ：ngのリピートとページネータ

Question

私は角度やブートストラップで新たなんだと、次のコードは正常に動作している理由を私は理解することはできません。

<ul class="pagination""> 
    <li ng-class=" { 'active': activePage==0, 'none': activePage!=0 }"> 
     <a ng-click="activePage=0">1 - 9</a> 
    </li> 
    <li ng-class=" { 'active': activePage==1, 'none': activePage!=1 }"> 
     <a ng-click="activePage=1">10 - 19</a> 
    </li> 
    <li ng-class=" { 'active': activePage==2, 'none': activePage!=2 }"> 
     <a ng-click="activePage=2">20 - 29</a> 
    </li> 
    <li ng-class=" { 'active': activePage==3, 'none': activePage!=3 }"> 
     <a ng-click="activePage=3">30 - </a> 
    </li> 
</ul> 

しかし、私が使用して同じことを行いたい場合NGリピート - それはにActivePage変数を更新しません：

<ul class="pagination" ng-repeat="p in [0,1,2];"> 
    <li ng-class=" { 'active': activePage==p, 'none': activePage!=p }"> 
     <a ng-click="activePage=p">{{ (p*10)+1}} - {{ (p*10)+9 }}</a> 
    </li> 
</ul> 

それに加えて、要素をクリックした後、スタイルは永久にそれらに保存されている - それがアクティブになり、以前に選択された要素も有効です。

あなたは私が間違ったことをする手がかりはありますか？

Answer 1

あなたはng-repeat内primitiveタイプの値を使用しているため、問題があります。だから、ng-repeatがテンプレートをn回レンダリングするたびに、その繰り返しに対してプロトタイプ的に継承された新しいスコープが作成されるたびに何が起こりますか？したがって、子スコープを作成している間は、すべてprimitiveの値&のオブジェクト値が子スコープを参照して保持されます。あなたはng-repeatのng-clickディレクティブ内activePage=pを行う際に使用しているので、それはng-repeat範囲内で新しいactivePage変数を作成しません。そのため、次のアイテムをクリックしても選択するページをクリックするたびにその理由があります。

この場合、Dot Ruleを使用する必要があります。ここでモジュール&を定義し、その内部にプロパティを定義することができます。このアプローチを使うことの基本的な利点は、子スコープの作成中にオブジェクトの参照を渡すことになります。

<ul class="pagination" ng-repeat="p in [0,1,2]"> 
    <li ng-class="{ 'active': model.activePage==p, 'none': model.activePage!=p }"> 
     <a ng-click="model.activePage=p">{{ (p*10)+1}} - {{ (p*10)+9 }}</a> 
    </li> 
</ul> 

コントローラ

$scope.model = { 
    activePage: 0 
} 

Forked Codeply

Answer 2

ng-repeat<li>タグでなければなりません...

<ul class="pagination" ng-init="activePage=1"> 
    <li ng-class="{ 'active': activePage==p, 'none': activePage!=p }" ng-repeat="p in [0,1,2]"> 
     <a ng-click="activePage=p">{{ (p*10)+1}} - {{ (p*10)+9 }}</a> 
    </li> 
</ul> 

http://www.codeply.com/go/l0nyBT678O