javascript - 动态更新CSS

我有这样的HTML设置

<div.... repeats in a loop... >
     ....
    <div ng-init="setWidthOfTimeLine(machine)" style="height:2px;" class="background-grey" >
        <div ng-style="setWidthOfTime"></div>
    </div>
</div>

在我的控制器中，我有这样的东西：

$scope.setWidthOfTimeLine = function(machine){

            var length = (machine.machineStatus).length - 1;
            var widthGreen = (length/8) *100;

                $scope.setWidthOfTime = {
                    background : "green",
                    width : widthGreen + '%',
                    height : '2px'
                }
                console.log($scope.setWidthOfTime);
        }

尽管可以在控制台上看到正确的CSS。它没有被应用到DOM，我缺少什么想法？

安慰：

Object {background: "green", width: "12.5%"}
Object {background: "green", width: "25%"}
Object {background: "green", width: "25%"}
Object {background: "green", width: "37.5%"}

编辑：通过在setWidthOfTime变量中设置高度来解决了一半问题，但是现在它对所有宽度值都采用了最后一个值（37.5％）。

最佳答案

两种解决方案可能会在这里有所帮助。

与其将setWidthOfTime设置为作用域的属性，不如尝试将其设置为作用域对象的属性。假设我们将此对象称为foo，则首先应在控制器中使用名为foo的属性初始化setWidthOfTime。从现在开始，无论在控制器或视图中，您都将读取或写入foo.setWidthOfTime。初始化后，此处的键永远不会覆盖foo。 （我建议您熟悉How scope inheritance works）

使用ngController的新语法作为propertyName（仅在较新版本的AngularJS中可用）。您会有类似ng-controller="MyController as myctrl"然后是ng-style="myctrl.setWidthOfTime的内容。这个新语法是一个新的认识，我自己没有使用过，但是我已经阅读了一下并看到了它的用处。尝试一下（如果您的AngularJS版本中可用）。 （Reference）