將元素屬性傳遞給ng類表達式

我想知道是否可以使用ng-class並提供一個基於正在使用的元素內部內容的表達式。將元素屬性傳遞給ng類表達式

因此，例如，說我有：

<table> 
    <tr ng-repeat="result in results"> 
     <td ng-class="vm.getNumberClass(...)"> 
      {{vm.getSomeMagicNumber(result)}} 
     </td> 
    </tr> 
</table>

難道我通過在td單元格內容的值作爲參數傳遞給我使用作爲對ng-class指令的表達式getNumberClass功能？

編輯

當我說通過在TD手機內容的價值，我的意思是在{{vm.getSomeMagicNumber(result)}}評估的結果作爲參數傳遞

我可以做這樣的事情。

<td ng-class="vm.getNumberClass(vm.getSomeMagicNumber(result))"> 
    {{vm.getSomeMagicNumber(result)}} 
</td>

儘管這樣做工作，爲我的情景，感覺就像一個性能命中爲調用該函數兩次

來源

2016-07-05 mindparse

當然你可以，如果它在相同的範圍內。你的循環高於你的'ng級'，並且高於你的''，所以你可以從兩者中調用'result'。你甚至可以在循環'ng-repeat'的同一級使用'result'變量。 – Elfayer

是的，那並不完全是我的意思，看到我的編輯，我看到你剛剛發佈了一個答案，並很快再次被刪除，但看到你提出了同樣的事情，因爲我已經結束了迄今 – mindparse

我更新了我的答案，從您的編輯。 – Elfayer

我真的不明白你願意這些功能裏面做什麼。

這裏是我會做什麼，以避免調用該函數兩次，你就必須把結果存儲的地方（如果它不是在CPU上，它必須是在RAM）：

angular.module('myApp', []); 
 

 
angular.module('myApp').controller('MyCtrl', function() { 
 
    var vm = this; 
 

 
    vm.getNumberClass = function(number) { 
 
    var className = ''; 
 

 
    switch (parseInt(number)) { 
 
     case 3: 
 
     className = 'red'; 
 
     break; 
 
     case 6: 
 
     className = 'coral'; 
 
     break; 
 
     case 9: 
 
     className = 'pink'; 
 
     break; 
 
    } 
 
    
 
    return className; 
 
    }; 
 

 
    vm.getSomeMagicNumber = function(result) { 
 
    // Any process here and store the result for each row 
 
    result.magicNumber = result.id * 3; 
 
    
 
    return result.magicNumber; 
 
    }; 
 

 
    vm.results = [{ 
 
    id: '1' 
 
    }, { 
 
    id: '2' 
 
    }, { 
 
    id: '3' 
 
    }]; 
 
});

.red { 
 
    background-color: red; 
 
} 
 

 
.coral { 
 
    background-color: coral; 
 
} 
 

 
.pink { 
 
    background-color: pink; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myApp" ng-controller="MyCtrl as vm"> 
 
    <table> 
 
    <tr ng-repeat="result in vm.results"> 
 
     <td ng-class="vm.getNumberClass(result.magicNumber)"> 
 
     {{vm.getSomeMagicNumber(result)}} 
 
     </td> 
 
    </tr> 
 
    </table> 
 
</div>

來源

2016-07-05 08:53:57 Elfayer

將元素屬性傳遞給ng類表達式

回答

相關問題