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

发布时间：2020-12-17 07:44:56 所属栏目：安全来源：网络整理

导读：我正在使用Ionic,并希望动态地更改 ion-list中的每个项目的背景颜色.基于数据.我以为我会通过函数调用来返回正确的类 ion-list ion-item ng-repeat="singleCase in allCases" ng-class="getBackgroundColour(singleCase)" class="item-avatar" h2{{singleCas

我正在使用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];
};

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!