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

Posted

技术标签:

【中文标题】AngularJS——创建自定义数据绑定和 ng-repeat【英文标题】:AngularJS -- creating a custom databinding and ng-repeat 【发布时间】:2012-08-09 20:07:58 【问题描述】:

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

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

我想显示每张卡片的名称和其中一个值(在屏幕上表示为每个卡片的正方形),根据用户是单击选项 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  >
    <div ng-repeat="card in cards" class="item card.class">
        <table >
            <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];


]);

【问题讨论】:

【参考方案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  >
    <div ng-repeat="card in cards" class="item card.class" ng-controller="aggCardController">
        <table >
            <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 中声明 option ,它将被继承到所有子范围中。

之所以在这里引入这个新的控制器,就是因为这个说法

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

因为我们在这里尝试访问 $scope.card 并记住 card 是在中继器中创建的新变量。此新变量仅在转发器创建的子范围内可用。如果您不需要访问 $scope.card,那么我们也可以在父作用域中编写这个 getOption() 函数。

还要注意,javascript 中的所有对象都是关联数组。这就是为什么我们使用数组访问运算符 [] 来访问 opt1 或 opt2 中的值的原因。

希望这会有所帮助。

【讨论】:

谢谢!如果某些数据对象现在提供了可能的选项,是否有不同的方法来调用 setOption(val) 以便 val 可以不在选项列表中?是否像在可能的选项列表上执行 ng-repeat 一样简单? @user1167650 已编辑答案以包含按钮选项变量列表的解决方案。 非常酷。画龙点睛,有没有办法根据设置的按钮来设置按钮的类? option==opt.Name 之类的东西?类名 ? 我试过 ng-class="(opt.Name==option)?'btn active':'btn'" 但这似乎不起作用 好的,让它工作......谢谢!我用 true:'btn active',false:'btn'[opt.Name==option] 。很奇怪,但它有效

以上是关于AngularJS——创建自定义数据绑定和 ng-repeat的主要内容,如果未能解决你的问题,请参考以下文章

Angularjs-指令

AngularJS:如何使用自定义指令来取代ng-repeat

angularjs1.x版本,父子组件之间的双向绑定

AngularJs 使用自定义 Json 中的 ng-repeat 创建表

angularjs随笔01 数据双向绑定理解 自定义过滤器 时钟更新列子

angularjs 难点总结