javascript - 优化 ng-repeat 次数 |angularJS

标签 javascript html angularjs json

我想根据给定的预定义级别(从级别 1 到级别 6)分离代码中的所有内容,现在我的 JSON 读取

$scope.myJson=[{
  id: 1,
  level: 1,
  name: "any name"
},
{
  id: 2,
  level: 2,
  name: "any name"
},
{
  id: 3,
  level: 2,
  name: "any name"
}....]

现在在我的 HTML 中我写了类似的东西

<div>level 1
  <div ng-repeat="prod in myJson"  ng-if="prod.level==1">{{prod.name}}
  </div>
</div>
<div>level 2
  <div ng-repeat="prod in myJson"  ng-if="prod.level==2">{{prod.name}}
  </div>
</div>

等等,我只想使用一个 ng-repeat 根据级别过滤 HTML 中的所有结果,因为结果数以千计,应用程序需要太多时间来响应

最佳答案

您可以在 ng Repeat 中尝试使用 switch case,例如:

<div ng-repeat="prod in myJson">
   <div ng-switch-on = "prod.level">
        <div ng-switch-when="1">
             Level 1 {{prod.name}}
        </div>
        <div ng-switch-when="2">
             Level 2 {{prod.name}}
        </div>
        <div ng-switch-default>
             Another level {{prod.name}}
        </div>
  </div>
</div>

因此您只需对数据进行一次运行。

关于javascript - 优化 ng-repeat 次数 |angularJS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44438887/

相关文章:

java - Nodejs 性能事件循环

javascript - 使用jquery在同一方向连续滚动 slider

javascript - 从 DOM 特定元素获取文本值

javascript - 选中 radio 时更改表格 td 背景颜色

html - 颜色不适用于事件按钮

javascript - 在 Angularjs 中有条件地添加表格元素

javascript - 在 WebGL 中制作球体旋转

javascript - 纯粹使用 javascript 而不使用 Nodejs 下载 azure blob?

javascript - 在 angularjs Controller 中调用全局 javascript 函数的可测试方法

javascript - 如何将参数传递给 Angular 中的 ng 事件处理程序?