javascript - ng-class 表达式中的委托(delegate)方法

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>

这是我的 Controller 。我在里面有一个方法 (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 函数本身。