AngularJS: Data binding to array elements doesn't work with bulk update

Question

The desired behavior is that I want to dynamically generate some navigation entries(some <a> s ) based on the data returned from backend. So I bind the herf and the text of each <a> to the fields of an element of an array model . Once the backend call returns, I assign the return data data to model to update the html. model and data share the same structure but this doesn't work for me.

The array looks like

     $scope.links = {
                    'cancelLink': 'http://cancelLink',
                    'Steps': [{
                      'label': "Step1",
                      'link': "http://1"
                    }, {
                      'label': "Step2",
                      'link': "http://2"
                    }, {
                      'label': "Step3",
                      'link': "http://3",
                      'active': true
                    }, {
                      'label': "Review",
                      'link': "http://review"
                    }]
                  };

The updating logic

$scope.loadLinks = function () {
                    $http({
                      method: 'GET',
                      url: '/links'
                    }).success(function(data) {
                        $scope.links = data;
                    });
                  };

HTML

<li><a class="text clickable" ng-href={{links.Steps[0].link}}>{{links.Steps[0].label}}</a></li>
<li><a class="text clickable" ng-href={{links.Steps[1].link}}>{{links.Steps[1].label}}</a></li>
...

The above code just failed silently without any output from the console. I tried assigning field-wise from date to link ( links.Steps[0].link == data.Steps[0].link ) and that works. So I wonder is this kind of bulk update not supported or something? Also I wonder how should I troubleshoot this kind of ng-directive issue down the road?

Answer 1

I put your code into a Plnkr at http://plnkr.co/edit/c5AOjyuLhBGqqugT4VU4?p=preview .

One small stylistic change (though it doesn't break in either way), you should wrap the ng-href value in quotes:

ng-href={{links.Steps[0].link}}

should be

ng-href="{{links.Steps[0].link}}"

Otherwise, as you can see in the Plnkr, it works fine. I'm guessing your problem is that the $http call is not loading the JSON as you are expecting, $scope in your controller is not accessible to your HTML, or the $scope that is getting set in the load function is not the same scope that you're accessing.

If you post a more complete set of code, we can see where it's breaking down.

Answer 2

The first time the binding ran, it bound the object links to your template .

So, if you make changes to the same object, it is reflected. However, when you fetch the links with loadLinks function, you create a new object (with the same name). No changes have been made to the original object that was bound.

This is the normal expected behaviour.

One of the ways that I do is empty the links array and fill it with the new data from server.

easy way to do it is

links.length = 0 //empties the array
//now append to links the data from server
Array.prototype.push.apply(links,data);

Or you can use any sugar libraries to merge array that actually modifies the original array