在ng類中的表達式中的委託方法

我想向ng類的表達式中添加一個方法。我想根據發現到有界對象中的某些信息對div進行着色。在ng類中的表達式中的委託方法

這是我的看法：

<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; 
}

我的問題是，使用上述，divs沒有着色。我做了一些調試，我看到調用方法delegateCheckStatus被調用，但沒有應用css。

如果我環繞（HTML文件），用單引號表達：

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

那麼所有的div將使用相同的顏色着色（在我的情況是綠顏色，因爲這是最後一次顏色應用）

在ng-class中將方法添加爲表達式的正確方法是什麼？

謝謝

來源

2016-06-07 florin

你可以簡化你的問題嗎？就像，創建一個簡單的相對片段。我想你會得到更多的關注。 –

'delegateCheckStatus'方法的這個部分'return patt.test（val）;'不清楚，'val'沒有被定義。 –

@AlecKravets你是對的。這是問題所在。 – florin

您在片段具有的語法是正確的：

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

這個問題似乎駐留在delegateCheckStatus功能本身。

來源

2016-06-07 13:49:11

在ng類中的表達式中的委託方法

回答

相關問題