AngularJS和Bootstrap：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-repeatprimitive類型值。因此，每當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