angularjs – 根据值应用ng-class

前端之家收集整理的这篇文章主要介绍了angularjs – 根据值应用ng-class前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个简单的ng-repeat,它显示一个得分列表和一个正面或负面的值.

我想要做的是当值为Negative时,显示红色背景CSS类,当为Positive时,显示绿色CSS类.但是,出于某种原因,我总是在页面上看到红色的CSS类.

HTML:

  1. <tr ng-repeat="scores in Test" ng-class="{true: 'warning',false: 'ok'}[scores.Indicator == 'Negative']">
  2. <td>Overall: {{ scores.Indicator }}</td>
  3. </tr>

CSS:

  1. .warning {
  2. background: red;
  3. }
  4.  
  5. .ok {
  6. background: green;
  7. }
我还没有看到之前使用的特定语法,{true:’warning’,false:’ok’} [scores.Indicator ==’Negative’]背后的理由是什么?

我在这里使用ngClass的方式是

  1. <tr ng-repeat="scores in Test" ng-class="{warning: (scores.Indicator == 'Negative'),ok: (scores.Indicator != 'Negative')}">

那样有用吗?

为了更好的可读性,您也可以将其委托给控制器

  1. <tr ng-repeat="scores in Test" ng-class="scoreClass(scores)">
  2.  
  3. $scope.scoreClass = function(scores) {
  4. return scores.Indicator == 'Negative' ? 'warning': 'ok';
  5. }

或者你可以创建一个指令

  1. <tr ng-repeat="scores in Test" score-class scores="scores">
  2.  
  3. .directive('scoreClass',[function() {
  4.  
  5. return {
  6. restrict: 'A',scope: {
  7. scores: '=',},link: function(scope,element,attrs,controller) {
  8. scope.$watch('scores',function() {
  9. element.removeClass('ok');
  10. element.removeClass('warning');
  11. if (scope.scores.Indicator == 'Negative') {
  12. element.addClass('warning');
  13. } else {
  14. element.addClass('ok');
  15. }
  16. },true);
  17. }
  18. };
  19. }]);

猜你在找的Angularjs相关文章