Question

使用AngularJS，我希望表格单元格的背景颜色取决于值。这是有效的，它是最有效的方式吗？我有几个表，我的示例只显示三种分数类型，但实际上我需要将格式设置为15种类型。

<td data-ng-repeat="score in scoreTypes"
    ng-class="{vGood: score.score_type == '3',
               good:  score.score_type == '10',
               avg:   score.score_type == '12'}">{{score.score_type}}</td>

Answer 1

一种方法是将数据推送到控制器的范围内：

$scope.scoreCSSClass = {
  '3': 'vGood',
  ...
};

和

<td data-ng-repeat="score in scoreTypes" ng-class="scoreCSSClasses[score.score_type]">{{score.score_type}}</td>

以及其他解决方案，如果您需要更多控制权：

在控制器中创建并绑定范围内的某些函数。

$scope.scoreCSSClass = function (score_type) {
  if (score_type == '3') {
    return 'vGood';
  } else if (score_type == '10') {
    return 'good';
  } else if (score_type == '12') {
    return 'avg';
  } else {
    return 'default';
  }
};

并像

一样使用它

<td data-ng-repeat="score in scoreTypes" ng-class="scoreCSSClass(score.score_type)">{{score.score_type}}</td>

Answer 2

如果有多个表具有相同的类登录，则可以将其移动到控制器上的函数中。 e.g。

JS

var MyCtrl = function($scope) {
    $scope.getScoreClass = function(score) {
        switch (score) {
            case '3':
                return 'vGood';
            case '10':
                return 'good';
            case '12':
                return 'avg';
        }
    }
}

HTML

<td data-ng-repeat="score in scoreTypes"
    ng-class="{{getScoreClass(score)}}">{{score.score_type}}</td>

Answer 3

尽量避免使$ scopes / Controllers膨胀。使您的应用程序代码可扩展且可重用。

您可以将分数的哈希值存储到常量中的类名中（以使它们保持不变并更易于管理）：

angular
    .module("yourModule")
    .constant("SCORE_TYPES", {
        "3" : "vGood",
        "10" : "good",
        "12" : "avg"    
    });

并创建一个过滤器，使用地图从分数中返回类名。过滤器注入常量：

angular
    .module("yourModule")
    .filter("getClassByScoreType", ["SCORE_TYPES", function(TYPES) {
        return function(scoreType) {
            return TYPES[scoreType] || ""; // default class name
        };    
    }]);

在您的HTML中，您不需要额外的指令ng-class，因为您正在直接在属性中评估类名：

<td data-ng-repeat="score in scoreTypes"
    class="{{ score.score_type | getClassByScoreType }}">{{score.score_type}}</td>

AngularJS条件表格式

3 个答案: