Question

Atm我有一张表格，显示我的会员的状态。是否可以这样做，如果会员身份=青铜 - ＆gt; td背景=青铜？我很抱歉，如果我不清楚这个问题，但我想根据成员的状态改变td背景的颜色。有什么建议我怎么做？

var app = angular.module('test', []);
            app.filter('status', function () {
                return function (input) {
                    var statu = input;
                    switch (input) {
                        case 10:
                            statu = 'Bronze';
                            break;
                        case 20:
                            statu = 'Silver';

                            break;
                        case 30:
                            statu = 'Gold';
                            break;
                        case 40:
                            statu = 'Elite';
                            break;
                    }
                    return statu;

                };
            });

Answer 1

您可以使用ng-class指令。

例如：

.bronze {
  background-color: red;
}
.silver{
  background-color: gray;
}


$scope.items = [
   {color: 'bronze'},
   {color: 'silver'}
];


<div ng-repeat="item in items"
     ng-class="{bronze: item.color == 'bronze', silver: item.color == 'silver'}">
</div>

Answer 2

要有条件地更改课程，我建议ng-class

例如：

app.controller('TestCtrl', function() {
    $scope.show = false;  

    if(condiiton) {
        $scope.show = true;
    }

});

并像这样扩充你的HTML：

<input ng-class="{ show: classname }">

如果此示例不够，请在此处阅读：https://docs.angularjs.org/api/ng/directive/ngClass

Answer 3

在视图中将成员状态传递给控制器内的changeBgColor函数

<td ng-style="changeBgColor(member.status)">

在控制器中，

$scope.changeBgColor = function(status) {
    var statu = status;
    switch (status) {
        case 10:
            statu = 'Bronze';
            break;
        case 20:
            statu = 'Silver';
            break;
        case 30:
            statu = 'Gold';
            break;
        case 40:
            statu = 'Elite';
            break;
      }
      return {'background-color': statu};
}

使用if语句更改css样式

3 个答案: