Question

检查以下示例。在这种情况下，昂贵的功能＆＃39;为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

您可以尝试通过向ng-show的商店状态添加新的显示属性，在单独的功能中进行所有计算。尝试通过调用函数一次完成所有计算。

例如。

var obj = {
    "set1": [1, 2, 3],
    "set2": [4, 5, 6, 7, 8],
    "set3": [9, 10, 11, 12]
};
var arr = []
for (var key in obj) {
    arr.push({key:obj[key]});
}
console.log(arr[1]);

Answer 2

如果句点的值是静态的，或者至少在每次迭代时都不会改变，那么在加载相应的控制器时，我只会计算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>

Angularjs转发器在ul里面 - 如何在不破坏html的情况下添加ng-show

2 个答案: