使用AngularJS，如何匹配来自两个单独ng重复的项目？

使用AngularJS，我正在创建一个表，该表通过两个web请求提取数据。 每个web请求在HTML中都有自己的ng repeat、

ng repeat=“user in users”

和

ng repeat=“app in apps”

。现在，所有现有的应用程序都会在每次重复的

user

中显示。我想做的是某种匹配、查找或筛选，只显示与用户关联的应用程序。因此，当

user.Title==app.Title

时

以下是HTML：

<div ng-app="myApp">
  <div ng-controller="MainCtrl">

    <div class="ProfileSheet" ng-repeat="user in users">
      <h3 class="heading">User Profile</h3>
      <table id="Profile">
        <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>
        <tr>
          <th>Job Title</th>
          <td>{{user.JobTitle}}</td>
        </tr>
        <tr>
          <th>Emp ID</th>
          <td>{{user.EmployeeID}}</td>
        </tr>
        <tr>
          <th>Officer Code</th>
          <td>{{user.OfficerCode}}</td>
        </tr>
        <tr>
          <th>Email</th>
          <td>{{user.Email}}</td>
        </tr>
        <tr>
          <th>Telephone</th>
          <td>{{user.WorkPhone}}</td>
        </tr>
        <tr>
          <th>Fax Number</th>
          <td>{{user.WorkFax}}</td>
        </tr>
        <tr>
          <th>Location Description</th>
          <td>{{user.LocationDescription}}</td>
        </tr>
        <tr>
          <th>Mailstop / Banking Center #</th>
          <td>{{user.Mailstop}}</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>Application</th>
          <th>User ID</th>
          <th>Initial Password</th>
          <th>Options / Comment</th>
          <th>Setup Status</th>
        </tr>
        <tr ng-repeat="app in apps">
          <td>{{app.Application.Title}}</td>
          <td>{{app.Title}}</td>
          <td>{{app.InitialPassword}}</td>
          <td>{{app.OptionsComments}}</td>
          <td style="border-right:3px solid #707070;">{{app.SetupStatus}}</td>
        </tr>
      </table>
      </div>

  </div>
</div>

我怎样才能做到这一点？

控制器中有很多无关的代码。为了回答这个问题，我删除了它。此外，我知道用户和应用程序之间有一个名为

Title

的属性，但这个名称让我感到困惑——如果数据没有意义，请原谅

建议：仅在严格必要时使用

$

（jQuery）。Angular提供了许多替代jQuery功能的功能。而不是使用

$。ready

类似：

$(document).ready(function() {
    $scope.getAdminList();
    $scope.getAppsList();
});

使用以下代码等待引导应用程序，直到文档准备就绪：

(function () {
    angular.element(document).ready(function () {
        angular.bootstrap(document, ['myApp']);
    });
})();

这样，您就不必让控制器承担等待文档加载的责任。注意：

ng app

已从标记中删除

建议：使用

$q.all（）

等待解决多个承诺

$q.all（）

将等待所有承诺解决调用

。然后（）

。这有助于确保开始使用时所有数据都可用

建议：仅将属性和函数分配给视图使用的

$scope

。我从

$scope

对象中删除了视图未使用的函数

它是如何工作的？ 当控制器加载时，我们使用

$q.all（）

调用并等待

fetchAdminList（）

和

fetchAppsList（）

从API获取数据。一旦每个API请求得到解决，我们将在

.then（）

回调中展开数据并返回它（阅读有关承诺链接的更多信息，了解从

.then（）

返回值时会发生什么）。当这两个承诺都解决时，我们将数据存储在

$scope

上，以使其可供视图使用。我们还预先计算每个用户可以使用哪些应用程序，并将这些数据存储在

$scope.userApps

中，以使其可供视图使用

我无法访问您从中获取数据的API。我使用

$q.resolve（）

和静态数据将

$http

调用替换为立即解析承诺。准备好后，只需将fetch函数中的原始

$http（…）

调用替换为

$q.resolve（…）

运行代码段以查看它的运行情况

var-app=angular.module（'myApp'，[]）；
（功能（）{
angular.element（文档）.ready（函数（）{
引导（文档，['myApp']）；
});
})();
变量用户=[
{
标题：“软件工程师”，
名字：“C”，
姓：“福斯特”，
雇员编号：1
},
{
标题：“软件工程师”，
名字：“J”，
姓：“霍金斯”，
雇员编号：2
},
{
标题：“首席执行官”，
名字：“某人”，
姓氏：'其他'，
雇员编号：3
}
];
变量应用=[
{
应用程序：{Title:'StackOverflow'}，
标题：“软件工程师”
},
{
应用程序：{Title:'Chrome'}，
标题：“软件工程师”
},
{
应用程序：{Title:'QuickBooks'}，
标题：“首席执行官”
}
]
app.controller（'MainCtrl'，函数（$scope，$http，$q）{
$q.all({
用户：fetchAdminList（），
apps:fetchAppsList（）
})
.然后（函数（结果）{
//将结果存储在$scope上
$scope.users=result.users；
$scope.apps=result.apps；
//预计算用户应用程序
$scope.userApps=$scope.users.reduce(
功能（用户应用程序、用户）{
userApps[user.EmployeeID]=getUserApps（user.Title）；
返回用户应用程序；
},
[]
);
});
函数fetchAdminList（）{
返回$q.resolve（{data:{d:{results:USERS}}}）
.then（函数（数据）{return data.data.d.results；}）；
}
函数fetchAppsList（）{
返回$q.resolve（{data:{d:{results:APPS}}}）
.then（函数（数据）{return data.data.d.results；}）；
}
//获取应用于用户标题的应用程序列表
函数getUserApps（userTitle）{
返回$scope.apps.filter（函数（应用程序））{
返回app.Title==userTitle；
});
}
});

用户配置文件
使用者
{{user.Title}}
名字
{{user.FirstName}
姓
{{user.LastName}
职位名称
{{user.JobTitle}
Emp ID
{{user.EmployeeID}
军官代码
{{user.OfficerCode}
电子邮件
{{user.Email}
电话
{{user.WorkPhone}
传真号码
{{user.WorkFax}}
位置描述
{{user.LocationDescription}}
邮递站/银行中心#
(function () {
    angular.element(document).ready(function () {
        angular.bootstrap(document, ['myApp']);
    });
})();