angularjs가있는 동적 스타일 시트

Question

나는 API를 통해 데이터를 가져 와서 anglejs 응용 프로그램을 가지고 있으며 웹 페이지를 만듭니다.

보통 동적 스타일을 만들려면 ng 스타일을 사용해야하지만 CSS 스타일 시트에서만 사용할 수있는 nth-of-type 속성을 사용해야합니다 (요소의 수와 순서 때문에 개별 스타일을 사용할 수 없음). 항상 변경).

나는 (HTML 페이지)이 순진 코드를 시도 ...

<style ng-if="styles.sc && styles.sc.length==3"> 
    a.mosection:nth-of-type(3n) > div { 
     background-color: {{styles.sc[0]}} !important; 
    } 
    a.mosection:nth-of-type(3n+1) > div { 
     background-color: {{styles.sc[1]}} !important; 
    } 
    a.mosection:nth-of-type(3n+2) > div { 
     background-color: {{styles.sc[2]}} !important; 
    } 
</style> 

그러나 그것은 작동하지 않았다 스타일 태그 내부의 데이터를합니다 (NG-경우 결합하지 않는 분명히 각도 속성이 적절하게 소화됩니다.

어떻게 이런 일을 할 수 있는지 잘 모르는 사람이 있습니까?

감사합니다.

Answer 1

당신은 그 세 ng- * 그들 모두가 속성과 기능을 수용 할 수

https://docs.angularjs.org/api/ng/directive/ngClass https://docs.angularjs.org/api/ng/directive/ngClassOdd https://docs.angularjs.org/api/ng/directive/ngClassEven

, 당신은 또한 체크 아웃 할 수 체크 아웃해야 실제로 최고의 수 있습니다 https://docs.angularjs.org/api/ng/directive/ngStyle

귀하의 경우

Answer 2

감사합니다. 난 정말 nth- I "는 CSS 속성과 동일한 기능을 구현했다

$scope.staggerBgColors = function(elesClass, eleClass, defaultColor){ 
    if (!$scope.styles || !$scope.styles.sc || $scope.styles.sc.length!=3){ 
    return defaultColor; 
    }else{ 
    var listItem = $('.'+eleClass); 
    var n = $('.'+elesClass).index(listItem) % 3; 
    return '#' + $scope.preview.moment.sc[n]; 
    } 
} 

기능

html로

<div class="widget widget-people" ng-style="{backgroundColor: staggerBgColors('widget', 'widget-people', '#333333')}"></div> 
<div class="widget widget-property" ng-style="{backgroundColor: staggerBgColors('widget', 'widget-property', '#24d10f')}"></div> 

범위 기능 겨 스타일을 사용하여 그것을 해결 타입의 "jQuery를 사용하지만, 그것은 완벽하게 작동합니다!