ul 中的 Angularjs 中继器 - 如何在不破坏 html 的情况下添加 ng-show答案

【问题标题】：Angularjs repeater inside ul - how to add ng-show without breaking htmlul 中的 Angularjs 中继器 - 如何在不破坏 html 的情况下添加 ng-show
【发布时间】：2015-11-18 19:53:47
【问题描述】：

查看下面的示例。在这种情况下，为 myList 中的每个项目调用“expensiveFunction”

<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>

感谢您的建议

拉西

【问题讨论】：

为什么生成的html无效？
@AndreKreienbring 它在 ul 下创建一个 div。它应该只有 li 作为直接子节点
通常你根本不应该从 html 调用昂贵的函数，因为它们无论如何都会启动每个摘要，你无法控制它
最简单的方法是使用两个 'ul' 并将 ng-hide 和 ng-show 添加到它们。
@jan 谢谢，这是一个可能的 sln，但我的例子有点简化，我不想复制我的所有标记

标签： angularjs angularjs-ng-repeat angular-ng-if

【解决方案1】：

如果 period 的值是静态的，或者至少不会随着每次迭代而改变，我将在加载相应的控制器时只计算一次 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>

【讨论】：

【解决方案2】：

您可以尝试在单独的函数中进行所有计算，方法是添加新的 display 属性来存储 ng-show 的状态。尝试通过调用一次函数一次完成所有计算。

例如。

/**
 * 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>

【讨论】：