我正在使用Ionic,并希望动态地更改< ion-list>中的每个项目的背景颜色.基于数据.我以为我会通过函数调用来返回正确的类
<ion-list>
<ion-item ng-repeat="singleCase in allCases" ng-class="getBackgroundColour(singleCase)" class="item-avatar">
<h2>{{singleCase.date}}</h2>
<p>{{singleCase.caseType}}</p>
</ion-item>
</ion-list>
这是目前的控制器
.controller('AllCasesCtrl',['$scope','$log','dummyData',function($scope,$log,dummyData) {
$scope.allCases = dummyData.cases;
$scope.getBackgroundColour = function(singleCase){
$log.log("getBackgroundColour called...singleCase type: " + singleCase.speciality);
var colourMap = {
speciality1: "speciality1Class",speciality2: "speciality2Class",speciality3: "speciality3Class"
};
return colourMap[singleCase.speciality];
};
}])
检查控制台时,getBackgroundColour()函数正在为每个< ion-item>调用7次.在列表中.为什么这样,我应该避免在ng类中使用函数调用？
AngularJS与
dirty checking一起使用：它需要调用每个循环的函数,以确保它不返回一个新值,并且不需要更新DOM.
它是框架的典型过程的一部分,并且调用一个简单的函数,不应该对任何负面的性能影响.您的代码的可读性和可测试性在这里更重要,因此将逻辑保留在控制器中.
然而,一个简单的事情只是在函数之外移动一个常量的colourMap的声明：
var colourMap = {
speciality1: "speciality1Class",speciality3: "speciality3Class",};
$scope.getBackgroundColour = function(singleCase) {
return colourMap[singleCase.speciality];
};
