我正在尝试创建一个自定义 Controller ,该 Controller 显示一堆绑定(bind)到数据集的类似对象,如下所示:
[{name: card1, values: {opt1: 9, opt2: 10}},{name: card1, values: {opt1: 9, opt2: 10}}]
我想显示每张卡的名称和其中一个值(在屏幕上以正方形表示),仅显示一个值,具体取决于用户是否单击选项 1 或选项 1 的按钮选项 2。我一直不知道如何更改使用 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>
Controller :
module.controller('aggViewport',['$scope','$location',function($scope,$location){
$scope.cards = [{name: card1, values: {opt1: 9, opt2: 10}},{name: card1, values: {opt1: 9, opt2: 10}}];
}]);
最佳答案
这是您的问题的可能解决方案
<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>
在你的 Controller 中:
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 的 Controller 时,您将创建控制该范围的 Controller 。所以现在您可以单独访问每个范围。将为每个创建的范围创建一个新的 Controller 。由于在 html 中, aggCardController 位于 aggViewPort 内部,因此它将继承父范围的属性。因此,如果您在 aggViewPort 中声明选项,它将被继承到所有子作用域中。
之所以在这里引入这个新的 Controller ,就是因为这句话
return $scope.card.values[$scope.option];
因为我们试图在这里访问 $scope.card 并记住 card 是在中继器中创建的新变量。这个新变量仅在中继器创建的子作用域中可用。如果您不需要访问 $scope.card 那么我们也可以在父作用域中编写此 getOption() 函数。
另请注意,JavaScript 中的所有对象都是关联数组。这就是我们使用数组访问运算符 [] 来访问 opt1 或 opt2 中的值的原因。
希望这有帮助。
关于javascript - AngularJS——创建自定义数据绑定(bind)和 ng-repeat,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11936955/