Question

使用AngularJS，我使用两个ng-repeat和匹配属性ng-if。第一个ng-repeat遍历近250个对象，其对象数组如下：

[{
  "Title": "First1 Last1",
  "FirstName": "First1",
  "LastName": "Last1",
  "ID": 29
}, {
  "Title": "First2 Last2",
  "FirstName": "First2",
  "LastName": "Last2",
  "ID": 25
}]

第二个ng-repeat遍历对象数组中近4600个对象，类似于：

[{
  "ParentUserLink": {
    "ID": 25
  },
  "Title": "USER2",
  "InitialPassword": "Already Received",
}, {
  "ParentUserLink": {
    "ID": 29
  },
  "Title": "USER1",
  "InitialPassword": "Asdf1234",
}, {
  "ParentUserLink": {
    "ID": 25
  },
  "Title": "USER2",
  "InitialPassword": "Already Received",
}, {
  "ParentUserLink": {
    "ID": 25
  },
  "Title": "USER2",
  "InitialPassword": "Already Received",
}]

使用ng-repeat="app in apps" ng-if="app.ParentUserLink.ID == user.ID"可以让我在应用程序属于正确的用户时显示它们。但是，这可能需要几分钟才能加载，并且通常会使浏览器崩溃。什么是更有效的方法呢？

我的HTML：

<div ng-repeat="user in users" id="pagebreak">
  <div class="ProfileSheet">
    <h3 class="heading" style="border-top: 3px solid #707070;">User Profile</h3>
    <table id="Profile" style="border-top: 3px solid #707070;">
      <tr>
        <th>User</th>
        <td>{{user.Title}}</td>
      </tr>
      <tr>
        <th>First Name</th>
        <td>{{user.FirstName}}</td>
      </tr>
      <tr>
        <th>Last Name</th>
        <td>{{user.LastName}}</td>
      </tr>
    </table>
    <br>

    <h3 class="heading">User Applications</h3>
    <div style="border:3px solid #707070; padding-right:12px;">
      <h4 style="padding-left:5px;">User Applications</h4>
      <table id="Apps">
        <tr id="AppsHeading">
          <th>User ID</th>
          <th>Initial Password</th>
        </tr>
        <tr ng-repeat="app in apps" ng-if="app.ParentUserLink.ID == user.ID">
          <td>{{app.Title}}</td>
          <td>{{app.InitialPassword}}</td>
        </tr>
      </table>
    </div>

  </div>
</div>

Answer 1

在ng-repeat表达式中使用过滤器：

̵<̵t̵r̵ ̵n̵g̵-̵r̵e̵p̵e̵a̵t̵=̵"̵a̵p̵p̵ ̵i̵n̵ ̵a̵p̵p̵s̵"̵ ̵n̵g̵-̵i̵f̵=̵"̵a̵p̵p̵.̵P̵a̵r̵e̵n̵t̵U̵s̵e̵r̵L̵i̵n̵k̵.̵I̵D̵ ̵=̵=̵ ̵u̵s̵e̵r̵.̵I̵D̵"̵>̵
<tr ng-repeat="app in apps | filter : idFilter(user.ID)">
  <td>{{app.Title}}</td>
  <td>{{app.InitialPassword}}</td>
</tr>

JS

$scope.idFilter = function(id) {
    return filter;
    function filter(value, index, array) {
         return value.ParentUserLink.ID == id;
    }
};

这可以避免将ng-if指令与其关联的子范围和观察者一起使用。

Answer 2

显着改善运行时的一种方法是仅在控制器中迭代一次4600对象列表并使用它来为视图供电。在我的头脑中，一个策略是：

创建一个空数组
迭代对象
检查给定用户ID的索引（即，如果ID = 29则检查array[29]）
如果索引为空，则添加包含当前对象的数组，否则将当前对象推送到该索引中的数组

现在，在您看来，您可以更改ng-repeat以使用array[ID]作为数组进行迭代。

这只是一种策略，它很可能不是最佳解决方案，但它应该显着改善运行时。

Answer 3

你的循环迭代250 * 4600次。你可以简单地将它减少到250 + 4600。

控制器：

var obj = {};
apps.forEach((app) => {
    obj[app.ParentUserLink.ID] = obj[app.ParentUserLink.ID] || [];
    obj[app.ParentUserLink.ID].push(app);
});

HTML：

....ng-repeat="user in users"
    ....ng-repeat"app in obj[user.id] || []"

匹配两个ng重复的对象属性

3 个答案: