AngularJS - 創建自定義數據綁定和NG-重複

Question

我試圖創建一個自定義控制器，顯示了一堆綁定到一個數據集，像類似如下的對象：

[{name: card1, values: {opt1: 9, opt2: 10}},{name: card1, values: {opt1: 9, opt2: 10}}] 

我d喜歡顯示每個卡的名稱和其中一個值（表示爲屏幕上的每個卡的正方形），只顯示一個值，取決於用戶是否單擊選項1或選項2的按鈕。 m停留在如何改變使用ng-repeat時顯示的值。

的html代碼：

<div ng-controller="aggViewport" > 
<div class="btn-group"> 
    <button class="btn active">opt1</button> 
    <button class="btn">opt2</button> 
</div> 
<div id="container" iso-grid width="500px" height="500px"> 
    <div ng-repeat="card in cards" class="item {{card.class}}"> 
     <table width="100%"> 
      <tr> 
       <td align="center"> 
        <h4>{{card.name}}</h4> 
       </td> 
      </tr> 
      <tr> 
       <td align="center"><h2>{{card.opt1}}</h2></td> 
      </tr> 
     </table>   
    </div> 
</div> 

控制器：

module.controller('aggViewport',['$scope','$location',function($scope,$location){ 
$scope.cards = [{name: card1, values: {opt1: 9, opt2: 10}},{name: card1, values: {opt1: 9, opt2: 10}}]; 


}]); 

Answer 1

這裏是一個可能的解決方案，您的問題

<div ng-controller="aggViewport" > 
<div class="btn-group" > 
    <button ng-click="setOption(opt.name)" ng-repeat="opt in optList" class="btn active">{{opt.name}}</button> 
</div> 
<div id="container" iso-grid width="500px" height="500px"> 
    <div ng-repeat="card in cards" class="item {{card.class}}" ng-controller="aggCardController"> 
     <table width="100%"> 
      <tr> 
       <td align="center"> 
        <h4>{{card.name}}</h4> 
       </td> 
      </tr> 
      <tr> 
       <td align="center"><h2>{{getOption()}}</h2></td> 
      </tr> 
     </table>   
    </div> 
</div> 

而在你的控制器：

module.controller('aggViewport',['$scope','$location',function($scope,$location){ 
$scope.cards = [{name: card1, values: {opt1: 9, opt2: 10}},{name: card1, values: {opt1: 9, opt2: 10}}]; 

$scope.option = "opt1"; 

$scope.setOption = function(val){ 
$scope.option = val; 
} 

}]); 

module.controller('aggCardController',['$scope',function($scope){ 

$scope.getOption = function(){ 
return $scope.card.values[$scope.option]; 
} 

}]); 

只是爲了解釋這裏發生了什麼。 aggCardController是單獨定義的，因爲當您使用ng-repeat時會創建一個新範圍。此外，當您使用ng-repeat引入控制器時，您將創建控制該範圍的控制器。所以現在你可以單獨訪問每個範圍。並且將爲每個創建的範圍創建一個新的控制器。由於在html中，aggCardController進入了aggViewPort，它將繼承父範圍的屬性。因此，如果您在aggViewPort中聲明選項，它將繼承到所有子範圍。

之所以在這裏介紹這個新的控制器是因爲這種說法

return $scope.card.values[$scope.option]; 

的因爲我們正試圖在這裏訪問$ scope.card並記住該卡是在轉發器中創建一個新的變量。這個新變量只在中繼器創建的子範圍中可用。如果你不需要訪問$ scope.card，那麼我們可以在父範圍內寫入這個getOption（）函數。

另請注意，JavaScript中的所有對象都是assciative數組。這就是我們使用數組訪問運算符[]訪問opt1或opt2中的值的原因。

希望這會有所幫助。