Angular ngStyle值更改不适用于DOM

Question

例如：

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

起初竞争对手数组有两个元素，宽度是228px;，然后数组有六个元素，data-ng-style中显示的宽度是668px，但实际上宽度仍然是228px，为什么？

    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);
        }
    });
}]);

Answer 1

原因是您使用的是"concat“

concat不会更改现有数组，但会返回一个新数组，其中包含联接数组的值。

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

Angular正在“观察”，并在这里引用了原始数组：

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

当您使用" concat“时，您将该引用更改为一个新的引用，因为concat不会修改现有的数组，它会返回一个新的数组。

您需要推送到现有的数组。

Answer 2

我猜测您使用的是旧版本的angular.js，可能是v1.0.8或更低版本。

尝试将ng-style中的{{ .. }}替换为( .. )，如下所示：

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

或者，如果可能，您可以将angular升级到1.2.x以使用原始语法。

编辑：我刚刚发现，即使是在1.2.x中，{{ .. }}语法也只能在第一次使用。如果表达式已更改，则不会发生任何操作。因此，您必须改为使用( .. )。