动态更新 CSS

Dynamically update CSS

本文关键字：CSS 更新 动态      更新时间：2023-09-26

我的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 ，那么您将首先在控制器中使用名为 setWidthOfTime 的属性初始化foo。从这一点开始，您将读取或写入foo.setWidthOfTime，无论在控制器或视图中。这里的密钥在初始化后永远不会覆盖foo。(我建议自己熟悉作用域继承的工作原理(

使用 ngController 的新语法作为 propertyName(仅在较新版本的 AngularJS 中可用(。你会有类似ng-controller="MyController as myctrl"然后ng-style="myctrl.setWidthOfTime.这个新语法是一个新认识的人，我自己没有用过它，但我读过它并看到了它的用处。试一试，如果它在你的AngularJS版本中可用。(参考资料(

假设machine是你从ngRepeat指令中得到的，试试这个：

<div.... ng-repeat="machine in $scope.machines"... >
     ....
    <div style="height:2px;" class="background-grey" >
        <div ng-style="setWidthOfTimeLine(machine)"></div> 
    </div>
</div>

控制器：

$scope.setWidthOfTimeLine = function(machine){
    var length = (machine.machineStatus).length - 1;
    var widthGreen = (length/8) *100;
    var widthOfTime = {
        background : "green",
        width : widthGreen + '%',
        height : '2px'
    }
    console.log(widthOfTime);
    return widthOfTime;
}
相关文章：