Question

例如：

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

首先竞争对手阵列有两个元素，宽度为228px;，然后数组有六个元素，data-ng-style中显示的宽度为668px，但实际宽度仍为228px 1}}，为什么？

    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'}">

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

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

Angular ngStyle值更改不适用于DOM

2 个答案: