使用带有函数调用的ng-class - 多次调用

时间:2014-11-18 10:36:57

标签: angularjs ionic-framework

我使用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-class中使用函数调用?

2 个答案:

答案 0 :(得分:24)

AngularJS与dirty checking一起使用:它需要调用函数每个周期以确保它不会返回新值并且DOM不会需要更新。

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

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

var colourMap = {
    speciality1: "speciality1Class",
    speciality2: "speciality2Class",
    speciality3: "speciality3Class",
};

$scope.getBackgroundColour = function(singleCase) {
  return colourMap[singleCase.speciality];
};

答案 1 :(得分:8)

只要你的名单不是那么庞大,你的方式就可以了。如果您使用的是角度1.3并希望降低调用次数,则可以将ng-class更改为ng-class =“:: getBackgroundColour(singleCase)”。这适用于一次时间绑定,因此一旦值稳定,它将不再检查。这很可能意味着每个项目有两个电话。