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

Question

使用AngularJS，我正在使用两个ng-repeats并将属性与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"允许我在应用程序属于正确用户时显示应用程序。但是，这可能需要几分钟才能加载，并且经常会使浏览器崩溃。有什么更有效的方法可以做到这一点？

我的网页：

<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 对象列表，并使用它来为视图提供支持。 在我的头顶上，一个策略是：

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

现在，在您的视图中，您可以更改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] || []"