는 동적이 업데이트 CSS

Question

은 내가 내 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 %)의 복용에 의해 고정 반 문제.

Answer 1

여기에 도움이되는 두 가지 해결책이 있습니다.

setWidthOfTime을 범위 속성으로 설정하는 대신 속성의 범위으로 설정해보십시오. 이 객체를 foo이라고하면, 컨트롤러에 setWidthOfTime이라는 속성으로 먼저 foo을 초기화 할 것입니다. 이 시점부터 컨트롤러 또는보기에 관계없이 foo.setWidthOfTime에 읽고 쓰게됩니다. 여기에있는 키는 일단 초기화되면 foo을 덮어 쓰지 않습니다. (How scope inheritance works에 익숙해지는 것이 좋습니다)

ngController의 새 구문 인 을 propertyName (최신 버전의 AngularJS에서만 사용 가능)으로 사용하십시오. ng-controller="MyController as myctrl"과 ng-style="myctrl.setWidthOfTime 같은 것이 있습니다. 이 새로운 문법은 새로운 지인이며 나는 그것을 직접 사용하지 않았지만 그것에 대해 읽었고 그것의 유용성을 보았습니다. AngularJS 버전에서 제공되는 경우 사용하십시오. (Reference)

Answer 2

가 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; 
}