AngularJS -- 创建自定义数据绑定和 ng-repeat

AngularJS -- creating a custom databinding and ng-repeat

本文关键字：ng-repeat 数据绑定 自定义 创建 AngularJS      更新时间：2023-09-26

我正在尝试创建一个自定义控制器，该控制器显示一堆绑定到数据集的类似对象，如下所示：

[{name: card1, values: {opt1: 9, opt2: 10}},{name: card1, values: {opt1: 9, opt2: 10}}]
我想显示每张卡片

的名称和其中一个值（在屏幕上表示为每张卡片的正方形），仅显示一个值，具体取决于用户是单击选项 1 还是选项 2 的按钮。 我被困在使用 ng 重复时如何更改显示的值。

网页代码：

<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}}];

}]);

这是您问题的可能解决方案

<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，并记住 card 是在中继器中创建的新变量。此新变量仅在转发器创建的子作用域中可用。如果你不需要访问$scope.card，那么我们可以在父作用域中编写这个getOption（）函数。

另请注意，javascript 中的所有对象都是断言数组。这就是我们使用数组访问运算符 [] 来访问 opt1 或 opt2 中的值的原因。

希望这有帮助。

相关文章：