2-way binding not working in AngularJS repeat

Question

Using the following code:

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

I expect the "inc" links to increment both types of records. However, it seems 2-way binding is only working here for the 1st type of record (where it's an object and I update a property on it). I've seen some mentions of similar problems and got the impression there is a problem with changing the actual bound object. Is this really the case? If so, I do believe it to be a missing feature.

longday · Accepted Answer · 2013-07-12 13:17:28Z

I'm not sure I understand the question but here is some working code that maps the first ng-repeat to records and the second ng-repeat to records2. Is this what you are trying to accomplish? The second ng-repeat was attached to mainCtrl and did not have an inc function on the scope. I set the second to use 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>

alfrescian · Accepted Answer · 2013-07-12 13:22:36Z

1

You missed the 2nd ItemController:

<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" ng-controller="itemCtrl2">
    <span>{{record}}</span><a ng-click="inc()">inc</a>
</div>

Here is working JSFiddle http://jsfiddle.net/alfrescian/fbLc9/

answered Jul 12, 2013 at 13:22

alfrescian

4,0791 gold badge20 silver badges20 bronze badges

Collectives™ on Stack Overflow

2-way binding not working in AngularJS repeat

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related