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?

Mike · Accepted Answer · 2014-10-31 00:14:31Z

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.

answered Oct 31, 2014 at 0:14

Mike

1,2461 gold badge7 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

MKhanal · Accepted Answer · 2014-10-31 00:23:12Z

0

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

answered Oct 31, 2014 at 0:23

MKhanal

3843 silver badges15 bronze badges

Collectives™ on Stack Overflow

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

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