以角度管理 For 循环？

Question

我是一个有角度的新手，我正在尝试遍历数组中的每个对象，以便为新数组中的每个对象创建一个用户行，请参见下面的场景

在下面的示例中，我只想获取 to_user_id 为每个创建新行

[{id: 1, to_user_id: 5, from_user_id: 4},
{id: 2, to_user_id: 6, from_user_id: 4}]

下面是我的服务，我知道我必须将它包装在一个 for 循环中并将对象推送到一个新数组，我只是不知道如何用角度表达它

UserService.GetUserById(to_user_id)
        .success(function (data) {

          }).
        error(function(error, status) {
          alert(status);
          console.log(error);         
      });
    });

Answer 1

虽然循环向服务器运行多个请求并不是一个好主意，但您可以通过使用承诺来控制所有请求的状态来方便。

考虑以下示例，了解如何使用从服务调用中检索到的附加 to_user 属性来扩充原始用户数组：

$scope.users = [
    {id: 1, to_user_id: 5, from_user_id: 4},
    {id: 2, to_user_id: 6, from_user_id: 4}
];

$q.all($scope.users.map(function(user) {
    return UserService.GetUserById(user.to_user_id).success(function(data) {
        user.to_user = data;
    });
}))
.then(function() {
    // all users are resolved successfully
})
.catch(function (error, status) {
    // at least one request failed
    alert(status);
    console.log(error);
});

演示： http://plnkr.co/edit/yLBTCSfcDhVL0ysCW3B6?p=preview

Answer 2

您返回的数据是一个数组，因此您可以循环遍历它：

$scope.users = [];

myService.getData().then(function(data){
    angular.forEach(data, function(user){
        getUser(user.to_user_id);
    });
});

function getUser(id) {
    UserService.GetUserById(id)
        .success(function (data) {
            $scope.users.push(data);
        }).error(function(error, status) {
            alert(status);
            console.log(error);         
        });
    });
}

然后遍历你范围内的用户：

<ul>
    <li ng-repeat="user in users">{{ user.name }}</li>
</ul>

Answer 3

根据需要多次运行您的服务。使用数组.push() 方法将新用户推送到您的数组中。然后在你的 html 中使用 ng-repeat 来显示它们，就像这样（使用 IIFE 闭包））

$scope.users = [];

for (var =i; i<maxValues; i++) {
    (function call(i)
    UserService.GetUserById(to_user_id)
        .success(function(data) {
            $scope.users.push(data);
    }))(i); 
}

使用 IIFE 闭包，您可以在循环中运行异步 http 调用，而不会在 promise 返回 .success() 时丢失 i

在 html 中（您可以使用表格而不是列表）

<ol>
    <li ng-repeat="user in users">{{user.to_user_id}}</li>
</ol>

Answer 4

使用角度 foreach 循环示例：

    $scope.newvalues = []; 
    angular.forEach(values, function(value) {
$scope.newvalues.push(values.to_user_id)
};