1

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);
        }
    });
}]);
S. A.
  • 3,714
  • 2
  • 20
  • 31
fisherspy
  • 21
  • 4
  • This [answer](http://stackoverflow.com/a/20287315/1264950) may help. Basically, you probably want to move the logic for generating the width into a single scope variable (for instance `$scope.width`), then set width in your template to `"{ 'width': width + 'px' }"` – Benjamin White Jul 22 '14 at 04:14
  • yes, the json obeject has 4 elements. – fisherspy Jul 22 '14 at 04:15
  • diry check is working, the value in ngstyle is right, but the DOM doesn't change. I tried $watch and $apply, the console shows:$digest already in progress – fisherspy Jul 22 '14 at 04:27
  • Which browser are you using? Is there any CSS rule with !important flag override your ng-style? – runTarm Jul 22 '14 at 05:06
  • @BenjaminWhite your advice helps! – fisherspy Jul 22 '14 at 05:16

2 Answers2

1

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.

g00dnatur3
  • 1,173
  • 9
  • 16
  • why at last data-ng-style="{'width': 668 + 'px'}" not {'width': 228 + 'px'}? – fisherspy Jul 22 '14 at 04:32
  • 1
    the ng-style tag will be updated correctly, but the digest loop is not going to be triggered because its watching on changes on the old array. the digest loop will update the view (what you see) – g00dnatur3 Jul 22 '14 at 04:34
  • I tried push elements, the result is the same..the value in ng-style is right, however the actual value is still 228px. – fisherspy Jul 22 '14 at 05:03
  • Make sure you dont have any "re-assignment" like this: $scope.competitors = (something) – g00dnatur3 Jul 22 '14 at 05:08
  • I found using concat is the same ,I changed html:
      ,then after concat: $scope.width = ($scope.competitors.length * 114) + 'px';
     – fisherspy Jul 22 '14 at 05:22
1

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.

runTarm
  • 11,537
  • 1
  • 37
  • 37