angularjs – 使用ng-class与函数调用 – 多次调用

前端之家收集整理的这篇文章主要介绍了angularjs – 使用ng-class与函数调用 – 多次调用前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在使用Ionic,并希望动态地更改< ion-list>中的每个项目的背景颜色.基于数据.我以为我会通过函数调用来返回正确的类
  1. <ion-list>
  2. <ion-item ng-repeat="singleCase in allCases" ng-class="getBackgroundColour(singleCase)" class="item-avatar">
  3. <h2>{{singleCase.date}}</h2>
  4. <p>{{singleCase.caseType}}</p>
  5. </ion-item>
  6. </ion-list>

这是目前的控制器

  1. .controller('AllCasesCtrl',['$scope','$log','dummyData',function($scope,$log,dummyData) {
  2. $scope.allCases = dummyData.cases;
  3.  
  4. $scope.getBackgroundColour = function(singleCase){
  5.  
  6. $log.log("getBackgroundColour called...singleCase type: " + singleCase.speciality);
  7.  
  8. var colourMap = {
  9. speciality1: "speciality1Class",speciality2: "speciality2Class",speciality3: "speciality3Class"
  10. };
  11.  
  12. return colourMap[singleCase.speciality];
  13. };
  14.  
  15. }])

检查控制台时,getBackgroundColour()函数正在为每个< ion-item>调用7次.在列表中.为什么这样,我应该避免在ng类中使用函数调用

AngularJS与 dirty checking一起使用:它需要调用每个循环的函数,以确保它不返回一个新值,并且不需要更新DOM.

它是框架的典型过程的一部分,并且调用一个简单的函数,不应该对任何负面的性能影响.您的代码的可读性和可测试性在这里更重要,因此将逻辑保留在控制器中.

然而,一个简单的事情只是在函数之外移动一个常量的colourMap的声明:

  1. var colourMap = {
  2. speciality1: "speciality1Class",speciality3: "speciality3Class",};
  3.  
  4. $scope.getBackgroundColour = function(singleCase) {
  5. return colourMap[singleCase.speciality];
  6. };

猜你在找的Angularjs相关文章