Угловой ретранслятор внутри ul - как добавить ng-show без нарушения html

Question

Посмотрите пример ниже. В этом случае «expensiveFunction» вызывается для каждого элемента в MyList

<ul> 
    <li ng-show="expensiveFunction(period)" ng-repeat="a in myList"> 
     <a ng-click="onMove(period)">Move here </a> 
    </li> 
    <li ng-hide="!canBook"> 
     <small>No free resources</small> 
    </li> 
</ul> 

Любые идеи о том, как предотвратить это?

<ul> 
    <!-- Possible, but creates invalid html --> 
    <div ng-show="expensiveFunction(period)"> 
     <li ng-repeat="a in myList"> 
     <a ng-click="onMove(period)">Move here </a> 
     </li> 
    </div> 
    <li ng-hide="!canBook"> 
     <small>No free resources</small> 
    </li> 
</ul> 

Спасибо за любые предложения

Larsi

Answer 1

Если значение периода является статическим или, по крайней мере, не изменяется при каждой итерации я бы вычислить expensiveFunction(period) только один раз, когда соответствующий контроллер загружен:

$scope.period = whatEverItIs 
$scope.isExpensive = expensiveFunction(period); 

И на ваш взгляд:

<ul> 
    <li ng-show="isExpensive" ng-repeat="a in myList"> 
     <a ng-click="onMove(period)">Move here </a> 
    </li> 
    <li ng-hide="!canBook"> 
     <small>No free resources</small> 
    </li> 
</ul> 

Answer 2

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

Например.

/** 
* Expensive function 
* @param {string} lists 
* @returns {object} 
*/ 
function expensiveFunction(lists){ 
    angular.forEach(lists, function (key, value) { 
     lists.display = true; // here goes your logic 
    }); 
    return lists; 
} 

var myList = expensiveFunction(myList); 

<ul> 
    <li ng-show="a.dispaly" ng-repeat="a in myList"> 
     <a ng-click="onMove(period)">Move here </a> 
    </li> 
    <li ng-hide="!canBook"> 
     <small>No free resources</small> 
    </li> 
</ul>