ng-class式への要素プロパティの受け渡し

Question

ng-classを使用し、それが使用されている要素の内部内容に基づいた式を提供できるかどうかは疑問でした。

したがって、たとえば、私が持っていると言う：

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

は私がng-classディレクティブの表現として使用していますgetNumberClass関数の引数としてtdセル内容の値を渡してもらえますか？

私は私のような何かができる引数

として{{vm.getSomeMagicNumber(result)}}の評価を行った結果を渡す意味、TDセルの内容の値を渡し言うEDIT。これは私のシナリオのための作業を行う一方で、その二回

Answer 1

私は本当にあなたがこれらの関数の内部で行うことを喜んでいるのか理解していない関数を呼び出すよう

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

、それはパフォーマンスヒットのように感じています。ここで

は、あなたがどこかに結果を格納する必要があります、私は二回関数を呼び出し避けるためであろうことである（それが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>