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触发的功能将很容易，但我怎样才能实现这一目标＆＃34;在飞行中＆＃34;虽然我正在迭代？因为执行此操作，我得到了一种无限循环，将所有分开。

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

$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 的控制器中完成，然后在那个渲染视图之后NG-重复。

所以foreach on store和foreach add to array，接下来在$ q.all中使用这个数组，在$ q.all渲染视图之后。

Answer 2

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

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

不要忘记包含ngResource依赖项。

Answer 3

一种方法是在获得AppController后

时获取所有数据

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!';
});

在ng-repeat内调用函数来检索值

3 个答案: