javascript - 2 路绑定(bind)在 AngularJS 重复中不起作用

标签 javascript angularjs binding 2-way-object-databinding

使用以下代码:

<div ng-controller="mainCtrl">    
    <div ng-repeat="record in records" ng-controller="itemCtrl">
        <span>{{record}}</span><a ng-click="inc()">inc</a>
    </div>
    <p></p>
    <div ng-repeat="record in records2">
        <span>{{record}}</span><a ng-click="inc()">inc</a>
    </div>
</div>

var mainCtrl = function($scope){
    $scope.records = [
        { val: 1},
        { val: 2},
        { val: 3},
        ];

    $scope.records2 = [1, 2, 3];
}

var itemCtrl = function($scope) {
    $scope.inc = function() {
        $scope.record.val++;
    };
}

var itemCtrl2 = function($scope) {
    $scope.inc = function() {
        $scope.record++;
    };
}

我希望“inc”链接可以增加两种类型的记录。然而,似乎双向绑定(bind)仅适用于第一种类型的记录(其中它是一个对象,我更新了它的属性)。 我看到过一些类似问题的提及,并得到了更改实际绑定(bind)对象时出现问题的印象。 事实真的如此吗? 如果是这样,我确实认为这是一个缺失的功能。

最佳答案

我不确定我是否理解这个问题,但这里有一些工作代码,将第一个 ng-repeat 映射到记录,将第二个 ng-repeat 映射到记录2。这就是你想要实现的目标吗?第二个 ng-repeat 附加到 mainCtrl 并且在作用域上没有 inc 函数。我将第二个设置为使用 itemCtrl2 Controller 。

<body ng-app="test1">
<div>
    <div ng-controller="mainCtrl">
        <div ng-repeat="record in records" ng-controller="itemCtrl">
            <span>{{record.val}}</span><a ng-click="inc()">inc</a>
        </div>
        <p></p>
        <div ng-repeat="record in records2" ng-controller="itemCtrl2">
            <span>{{record}}</span><a ng-click="inc()">inc</a>
        </div>
    </div>

    <script>
        var app = angular.module("test1", []);
        app.controller("mainCtrl", function ($scope) {
            $scope.records = [
                { val: 1 },
                { val: 2 },
                { val: 3 }
            ];

            $scope.records2 = [1, 2, 3];
        });

        app.controller("itemCtrl", function ($scope) {
            $scope.inc = function () {
                $scope.record.val++;
            };
        });

        app.controller("itemCtrl2", function ($scope) {
            $scope.inc = function () {
                $scope.record++;
            };
        });

    </script>
</div>

关于javascript - 2 路绑定(bind)在 AngularJS 重复中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17615366/

相关文章:

ios - SwiftUI 多个垂直列表行动画不起作用

c# - 使用引用的 ItemsSource 绑定(bind)到 SelectedItem

JavaScript/jQuery 日期时间差异

c# - WPF应用程序的自动完成功能

javascript - 表格不断调整大小而不溢出

javascript - Angular 中奇怪的路由行为

javascript - typescript 泛型?

angularjs - 从 AngularJS url 中删除片段标识符(# 符号)

javascript - 使用jquery获取span的高度

javascript - AngularJS $http 结果与 promise