CODEWITHSUNDEEP
angularjs
fisherspy
fisherspy

Reputation: 21

Angular ngStyle value change does not apply to the DOM

For example:

<ul id= "scroller" data-ng-style="{'width': {{competitors.length * 114}} + 'px'}">

At first competitors array have two elements, the width is 228px; then the array has six elements, the width shown in data-ng-style is 668px, but actually the width is still 228px, why?

    app.controller('intelligenceController', ['$scope', '$http', function($scope,$http)  {
    $scope.competitors = [
        {
            "competitorId": "excellent",
        },
        {
            "competitorId": "average",
        }
    ];
    $scope.sumCompetitors = function(customList) {
        if (0 === customList.length) {
            $scope.competitors = $scope.competitors.concat({
                "competitorId": "none",
            });
        } else {
            $scope.competitors = $scope.competitors.concat(customList);
        }
    };
    $http.get('./listCompetitors.json').success(function(competitorsList) {
        if (false === competitorsList.hasError && 0 === competitorsList.content.code) {
            $scope.sumCompetitors(competitorsList.content.data);
        }
    });
}]);

Upvotes: 1

Views: 1001

Answers (2)

runTarm
runTarm

Reputation: 11547

My guess is that you are using an old version of angular.js, may be v1.0.8 or below.

Try replace the {{ .. }} in the ng-style with ( .. ) like this:

<ul id="scroller" data-ng-style="{'width': (competitors.length * 114) + 'px'}">

or if possible, you could upgrade the angular to be 1.2.x to use your original syntax.

Edit: I've just found that the {{ .. }} syntax will works only for the first time even in 1.2.x. If the expression has been changed, nothing happens. Therefore, you have to change to use ( .. ) instead.

Upvotes: 1

g00dnatur3
g00dnatur3

Reputation: 1193

The reason is because you are using "concat"

The concat does not change the existing arrays, but returns a new array, containing the values of the joined arrays.

http://www.w3schools.com/jsref/jsref_concat_array.asp

Angular is "watching" and has a reference to the original array here:

$scope.competitors = [
    {
        "competitorId": "excellent",
    },
    {
        "competitorId": "average",
    }
];

When you use "concat" you are changing that reference to a new one because concat does not modify the existing array, it returns a new one.

You need to push to your existing array.

Upvotes: 1

Related Questions