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中的值的原因。

希望这会有所帮助。