Использование ng-класса с вызовом функции - многократно

Я использую 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?

Ответы

Ответ 1

AngularJS работает с грязной проверкой: ему нужно вызвать функцию каждый цикл, чтобы убедиться, что она не возвращает новое значение и что DOM не нужно обновлять.

Это часть типичного процесса фреймворка и вызов функции, столь же простой, как ваш, не должен иметь любого отрицательного воздействия на производительность. Читаемость и проверяемость вашего кода здесь важнее, поэтому держите логику в своем контроллере.

Однако, одна простая вещь - просто переместить объявление colourMap, которое является константой, вне вашей функции:

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

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

Ответ 2

Ваш путь прекрасен, пока ваш список не является огромным размером. Если вы используете angular 1.3 и хотите снизить количество вызовов, вы можете изменить свой ng-класс на ng- class= ":: getBackgroundColour (singleCase)". Это относится к однократной привязке, поэтому, когда значение будет стабильным, оно не будет проверяться снова. Это, скорее всего, означает два вызова на элемент.