ng-class 表达式中的委托方法
Delegate method in expression in ng-class
我正在尝试为 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)检查我是否有 mstatus in string machineStatus:
.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)'
然后所有 divs 将被涂上相同的颜色(在我的例子中是绿色,因为这是最后应用的颜色)
在 ng-class 中添加方法作为表达式的正确方法是什么?
谢谢
代码段中的语法正确:
ng-class="{'redDiv': mc.delegateCheckStatus(mc.STATES.down, machine.status), ...}
问题似乎出在 delegateCheckStatus
函数本身。
我正在尝试为 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)检查我是否有 mstatus in string machineStatus:
.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)'
然后所有 divs 将被涂上相同的颜色(在我的例子中是绿色,因为这是最后应用的颜色)
在 ng-class 中添加方法作为表达式的正确方法是什么?
谢谢
代码段中的语法正确:
ng-class="{'redDiv': mc.delegateCheckStatus(mc.STATES.down, machine.status), ...}
问题似乎出在 delegateCheckStatus
函数本身。