Question

我正在尝试为ng-class的表达式添加一个方法。我想根据发现有界物体的一些信息为div着色。

这是我的观点：

<div class="starter-template" ng-controller="MachineController as mc">
<div class="machineContainer" ng-repeat="machine in mc.data">
    <div class="machineView" ng-class="{
        'redDiv': mc.delegateCheckStatus(mc.STATES.down, machine.status),
        'yellowDiv': mc.delegateCheckStatus(mc.STATES.idle, machine.status),
        'greenDiv': mc.delegateCheckStatus(mc.STATES.running, machine.status)
    }">{{machine.name}}</div>
</div>

这是我的控制器。在里面我有一个方法（ delegateCheckStatus ）来检查我是否在字符串 machineStatus 中有 mstatus ：

    .controller('MachineController', ['MachineInfo','FormatName', function(MachineInfo,FormatName){
    var vm = this;
    vm.data = undefined;
    vm.pattern = '^([a-zA-Z]+)([0-9]+)$';
    vm.STATES = {
        'idle': 'idle',
        'down': 'down',
        'running': 'running',
        'notPosted': 'not posted'
    }


    MachineInfo.getMachineInfo().then(function(response){
        var data = angular.fromJson(response.data);
        vm.data = FormatName.formatName(data.machines);
    }, function(response){
        console.log(response);
    });

    vm.delegateCheckStatus = function(mstatus, machineStatus){
        var patt = new RegExp(mstatus);
        if(patt.test(machineStatus)){
            return patt.test(val);
        }
        return false;
    }
}]);
var theDataOfAllDatas = [
    { id: 1, name: "mnp111", ip: "192.168.184.137", status: "down", description: "m1", errors: null },
    { id: 2, name: "mnp112", ip: "192.168.184.138", status: "idle", description: "m2", errors: null },
    { id: 3, name: "mnp113", ip: "192.168.184.139", status: "server running", description: "m3", errors: null }];

theDataOfAllDatas 是我的测试数组

根据方法 delegateCheckStatus 返回的值，我想为div着色（参见html文件）

我的css文件如下所示：

.starter-template {
  padding: 40px 15px;
}
.machineView{
    float: left;
    border: solid 1px;
    border-radius: 3px;
    padding: 2px;
}
.redDiv{
    background-color: #FF6666;
}
.yellowDiv{
    background-color: #FFFF66;
}
.greenDiv{
   background-color: #66FF66;
}

我的问题是使用上面的内容，div没有着色。我做了一点调试，我看到方法 delegateCheckStatus 被调用但没有应用css。

如果我用单引号括起来（在html文件中）表达式：

'redDiv': 'mc.delegateCheckStatus(mc.STATES.down, machine.status)'

然后所有的div都会用相同的颜色着色（在我的例子中是绿色，因为这是应用的最后一种颜色）

在ng-class中添加方法作为表达式的正确方法是什么？

谢谢

Answer 1

您在代码段中的语法是正确的：

ng-class="{'redDiv': mc.delegateCheckStatus(mc.STATES.down, machine.status), ...}

问题似乎存在于delegateCheckStatus函数本身。

在ng-class中表达式中的方法

1 个答案: