변경 CSS (또는 클래스)

Question

내 주요 HTML 내 카드 정보 지침에

<span ng-repeat="acqui in acquis"> 
    <card-info class="card" acqui="acqui"></card-info> 
</span> 

(별도의 HTML에 NG-반복에서 오는 데이터를 파일) 데이터를 표시하는 몇 가지 요소가 있습니다

<h6 class="buyer">Acquired By: <strong>{{acqui.buyer.name}}</strong></h6> 
<h2 class="seller">{{acqui.seller.name}}</h2> 
<h1 id="value" class="value">{{acqui.value | shortNumber}}</h1> 

값이 공개되지 않은 경우 값의 색을 변경하고 싶습니다. 나는 클래스를 "value"에서 "undis"로 변경하는 것을 선호하지만 CSS를 덮어 쓰고 색상을 변경하는 것으로 괜찮습니다.

나는 몇 가지 방법을 시도했지만 아직 성공하지 못했습니다.

내 지시에 감지 시도 :

acquisitionApp.directive('cardInfo', function() { 
return { 
    restric: 'E', 
    scope: { 
     acqui: '=' 
    }, 
    link: function(scope, element, attrs) { 
     scope.$watch(attrs.cardInfo, function(value) { 
      if(value.value === "undisclosed") { 
       element.css("color", "#FF2100"); 
      } 
     }); 
    }, 
    templateUrl: 'js/directives/card.html' 
}; 

});

하지만 값

은

나는 또한 내가 처음

acquisitionApp.controller('acquiController', ['$scope','$http','acquiFactory', function($scope, $http, acquiFactory) { 
acquiFactory.get() 
    .success(function(data) { 
     angular.forEach(data, function(value, key) { 
      if(data[key].value === -1) { 
       data[key].value = "undisclosed"; 
       angular.element(document.querySelector('#value')).css("color", "#FF2100"); 
      } 
     }) 
     $scope.acquis = data; 
    }); 

에 정의되지 않은 값을 1로 설정 내 컨트롤러에서 시도 (나는 value.value하지, 평균값) 정의되지하지만 그 '아무튼 아무것도 바꾸지 마라. 나는 이것이 올바른 각도로 접근하는지 정말로 확신 할 수 없다. 이것을 어떻게 할 수 있습니까?

Answer 1

아마 당신은 지시어에서 CSS를 변경하려고 시도하고 있습니다. 이 <h1> 요소에 ng-style을 그냥 사용할 수 없습니까?

<h1 id="value" class="value" ng-style="{ color: acqui.value=='undisclosed'? '#FF2100':'' }">{{acqui.value | shortNumber}}</h1> 

이 acqui.value의 값을 확인하고 undisclosed을 나 값을 사용하지 않는 경우 중 하나 #FF2100를 사용합니다.