Question

我有一个包含两个级别的巨大JSON对象树。第一级有大约500个元素，每个元素平均包含100个子元素。

我想显示树的第一级，我使用简单的ng-repeat进行操作。当用户点击element时，我想显示该元素的子元素。如果我在页面首次渲染时使用范围ng-switch或ng-show显示/隐藏子元素，则会在生成所有HTML时冻结大约10秒钟。

这听起来不像是正确的解决方案。必须采用不同的方式，但我无法弄明白。有人知道吗？

Answer 1

我在评论中解释得最多，这里有一个工作的人： http://plunker.co/edit/RSZwfLlsCJ68MUkACbdp?p=preview

新的ng-if指令将执行您想要的操作

  <h1>ng-if</h1> <h5>Click on the level to expand</h5>
  <div class="well">
    <ul class="nav nav-list" ng-repeat="(attr,element) in tree">
      <li ng-click="expand=!expand" ng-class="{'active':expand}"><a>{{element.name}}</a></li>
      <ul ng-if="expand" class="nav nav-list">
        <li ng-repeat="item in element.items">{{item.name}}</li>
      </ul>
    </ul>
  </div>

您也可以使用新的三元运算符或其替代ng-show

在expr && if_true || if_false的“旧路”中执行此操作

<h1>old-way</h1> <h5>Click on the level to expand</h5>
  <small>use ternary operator or <pre>expand && element.items || []</pre></small>
  <div class="well">
    <ul class="nav nav-list" ng-repeat="(attr,element) in tree">
      <li ng-click="expand=!expand" ng-class="{'active':expand}"><a>{{element.name}}</a></li>
      <ul ng-show="expand" class="nav nav-list">
        <li ng-repeat="item in (expand ? element.items : [])">{{item.name}}</li>
        <!--<li ng-repeat="item in (expand && element.items || [])">{{item.name}}</li>-->
      </ul>
    </ul>
  </div>

Answer 2

有关ng-repeat性能的信息，请参阅this answer。从本质上讲，自从Angular的ng-repeat以及基本上所有其他指令设置为始终在整个JSON结构中寻找更新时，它需要很长时间。因此，如果您在更改JSON时有大量数据并且在HTML视图中不需要实时更新，我建议不要使用AngularJS。通常，AngularJS的性能也很大程度上取决于浏览器及其JavaScript引擎。

或者，您可以将JSON划分为子部分，然后使用pagination显示它。

Answer 3

我建议从服务器逐步获取数据。使用服务器端分页并仅检索要显示的字段。然后，当用户单击其中一个第一级项目时，您可以使用新数据对服务器执行另一次XHR。我对项目有类似的要求，解决了延迟问题。

此致奥古斯丁。

使用angular动态生成html的正确策略

3 个答案: