ng-class 表达式中的委托方法答案

【问题标题】：Delegate method in expression in ng-classng-class 表达式中的委托方法
【发布时间】：2016-06-07 21:49:11
【问题描述】：

我正在尝试向 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 中添加方法作为表达式的正确方法是什么？

谢谢

【问题讨论】：

你能简化你的问题吗？比如，创建一个简单且相对的sn-p。我想你会得到更多的关注。
delegateCheckStatus方法的这部分return patt.test(val);不清楚，val没有定义。
@AlecKravets 你是对的。这就是问题所在。

标签： javascript html css angularjs ng-class

【解决方案1】：

你在sn-p中的语法是正确的：

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

问题似乎出在delegateCheckStatus 函数本身。

【讨论】：