0

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

我想显示树的第一级，我用一个简单的ng-repeat. 当用户单击element我想显示该元素的子元素时。如果我在页面首次呈现时使用 spanng-switch或 a来显示/隐藏子元素，它会在生成所有 HTML 时冻结大约 10 秒。ng-show

这听起来不像是正确的解决方案。必须有不同的方法，但我无法弄清楚。有谁知道？

4

3 回答 3

1

我在评论中解释得最多，这里是一个工作的 plunker： 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>
于 2013-06-16T00:27:50.053 回答
0

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

问候，奥古斯丁。

于 2013-06-15T14:23:27.037 回答
0

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

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

于 2013-06-15T14:10:58.453 回答