在 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>

如您所见，我正在尝试使用从 stores 数组中的值接收 store.client_id 的函数来检索客户端名称。通常使用由 ng-click 触发的函数会很容易，但我如何在迭代时“即时”实现这一点？ 因为执行这个我会得到一种无限循环，它会完全分开。

这是在控制器端返回客户端名称的函数的代码：

$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

当您返回 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

Answer 2

您必须了解 $http jest 是异步的，因此您的响应将在所有 ng-repeat 之后返回，因此必须在 $q.all 的控制器中完成此类操作，然后使用ng-重复。

foreach 在商店和 foreach 中添加到数组中也是如此，接下来在 $q.all 中使用这个数组，在 $q.all 渲染视图之后。

Answer 3

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

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

不要忘记包含 ngResource 依赖项。