调用 ng-repeat 中的函数以检索值

Question

我遇到了这种情况，我正在迭代来自端点的 json 响应：

控制器代码块：

$http({
    method: 'GET',
    url: 'http://mywebsite.com/api/v1/stores/'
}).
success(function(data, status, headers, config) {
    $scope.stores = data;
}).
error(function(data, status, headers, config) {
    $scope.name = 'Error!';
});

在我的 html 视图中，我得到了这个：

<tbody>
    <tr ng-repeat="store in stores">
        <td>{{store.name}}</td>
        <td> {{store.type}} </td>
        <td><span ng-repeat="client in retrieveClientName(store.client_id)">
                {{client.name}}
            </span>
        </td>
        <td>{{store.address}}</td>
    </tr>
</tbody>

如您所见，我正在尝试使用从 存储中的值接收 store.client_id 的函数来检索客户端名称数组。通常使用由 ng-click 触发的函数很容易，但是我如何在迭代时实现这个 "on the fly" ？因为执行这个我得到了一种无限循环，打破了一切。

这里是控制器端 returns 客户端名称的函数代码：

$scope.retrieveClientName = function(id) {
   $http({
          method: 'GET',
          url: 'http://mywebsite.com/api/v1/clients?client_id='+id
      }).
      success(function(data, status, headers, config) {
          return $scope.clients=data;
      }).
      error(function(data, status, headers, config) {
          $scope.name = 'Error!';
      });
    }

我也尝试过使用 mg-init 指令

<td  ng-init="clients=retrieveClientName(store.client_id)"><span ng-repeat="client in clients">{{client.name}}</span></td>

Answer 1

你必须明白 $http jest 是异步的，所以你的响应会在所有 ng-repeat 之后返回，所以这样的事情必须在 $q.all[=15= 的控制器中完成] 然后用 ng-repeat 渲染视图。

所以在商店上做 foreach，在 foreach 中添加到数组，接下来在 $q.all 中使用这个数组，在 $q.all 渲染视图之后。

Answer 2

retrieveClientName函数错误：$http return一个promise，成功回调的return值不是函数的return值，你无法将 ng-repeat 绑定到 promise，试试这个：

$scope.retrieveClientName = function(id) {
    return $resource('http://mywebsite.com/api/v1/clients?client_id='+id).query();
}

不要忘记包含 ngResource 依赖项。

Answer 3

一种方法是在 stores 返回时获取所有数据

$http({
    method: 'GET',
    url: 'http://mywebsite.com/api/v1/stores/'
}).
success(function(data, status, headers, config) {
    $scope.stores = data;
    angular.forEach($scope.stores, function(store){
        $scope.retrieveClientName(store.client_id).then(function(clients){
             store.clients = clients;
        });
    });
}).
error(function(data, status, headers, config) {
    $scope.name = 'Error!';
});

编辑：我会稍微更改结构以使代码更清晰

$scope.retrieveClientName = function(store) { // pass in store so we can attach results here
   $http({
      method: 'GET',
      url: 'http://mywebsite.com/api/v1/clients?client_id='+store.client_id
   }).
   success(function(data, status, headers, config) {
      return store.clients = data; // attach result in object
   }).
   error(function(data, status, headers, config) {
      $scope.name = 'Error!';
   });
}

$http({
    method: 'GET',
    url: 'http://mywebsite.com/api/v1/stores/'
}).
success(function(data, status, headers, config) {
    $scope.stores = data;
    angular.forEach($scope.stores, function(store){
        $scope.retrieveClientName(store); // no need .then here
    });
}).
error(function(data, status, headers, config) {
    $scope.name = 'Error!';
});

<tbody>
    <tr ng-repeat="store in stores">
        <td>{{store.name}}</td>
        <td> {{store.type}} </td>
        <td><span ng-repeat="client in store.clients"> <!-- use data here -->
                {{client.name}}
            </span>
        </td>
        <td>{{store.address}}</td>
    </tr>
</tbody

调用 ng-repeat 中的函数以检索值

Call function inside ng-repeat to retrieve value

javascript

angularjs

ng-repeat

ng-init