javascript - 如何在模板中绑定(bind)两个变量(AngularJS)

Question

我有一个简单的模板如下:

      <ul ng-repeat="email in emails">
      <br>Email ID {{email.EmailsID}} <br>
       Unread {{email.Unread}}
       <ul>

问题是我需要在两次调用中获取数据: EmailsID 的列表来自 API 和 Unread每个的值EmailsID来自另一个 API。知道如何进行这项工作吗？我已经尝试了下面的方法，我可以获取 EmailsID但我不知道如何将它与 syncAPI 中每个 emailsId 的未读值合并。目前，我已将 API URL 中的 emailsId 值硬编码为 9，如下所示 http://local.app.com:8080/imap/syncAPI?emailsId=9

var crmApp = angular.module('crmApp', []);

crmApp.controller('EmailsCtrl', function($scope, $http) {
  $http.get('http://local.app.com:8080/emailsAPI', {withCredentials: true}).success(function(data) {
 var index;
for (index = 0; index < data.length; ++index) {
$http.get('http://local.app.com:8080/messages/imap/syncAPI?emailsId='+data.EmailsID+'&mailbox=inbox', {withCredentials: true}).success(function(unreadD) {

 data[index].unread = unreadD;
   $scope.emails = data;
      });
});

我是 angularjs 和 javascript 新手

Answer 1

问题是您正在迭代一系列异步回调，其中每个回调在调用时肯定会引用 index = emails.length 。即您的所有回调都将引用 $scope.emails[data.length] = unreadD。

您可以使用angular.forEach()，而不是使用for循环作为迭代器。

var crmApp = angular.module('crmApp', []);

crmApp.controller('EmailsCtrl', function($scope, $http) {
  $http.get('http://local.app.com:8080/emailsAPI', {withCredentials: true})
    .success(function(emails) {
       $scope.emails = emails;
       angular.forEach(emails, function(email) {
          $http.get('http://local.app.com:8080/imap/syncAPI?emailsId=' + email.EmailsID + '&mailbox=inbox', {withCredentials: true}).success(function(unreadD) {
            email.Unread = unreadD;
          });
       });
    });
});