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

小编典典

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

angularjs

我正在使用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()每个函数均被调用7次<ion- item>。这是为什么，我应该避免在其中使用函数调用ng-class吗？

阅读 222

2020-07-04

共1个答案

小编典典

AngularJS可以进行脏检查：它需要在 每个循环中 调用该函数，以确保它不返回新值，并且不需要更新DOM。

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

但是，要做的一件简单的事情colourMap就是将函数的声明（它是一个常量）移到函数之外：

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

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

2020-07-04