Javascript 在ng repeat中调用函数以检索值

我遇到了这种情况，我正在迭代来自端点的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>

我还尝试使用mg init指令

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

{{client.name}

您必须理解$http jest异步，因此在所有ng repeat之后，您的响应将返回，因此必须在控制器中的$q.all中完成此操作，然后使用ng repeat渲染视图

---

因此，在存储区和foreach add to array中使用foreach，然后在$q.all中，在$q.all呈现视图之后使用此数组。

您必须了解$http jest异步，因此在所有ng repeat之后，您的响应将返回，因此必须在控制器中的$q.all中以及在使用ng repeat呈现视图之后执行此操作

---

因此，在存储区和foreach add to array中执行foreach操作，然后在$q.all中，在$q.all呈现视图之后使用此数组。

RetrieveClient Name函数错误：$http返回承诺，成功回调的返回值不是函数的返回值，您无法将ng repeat绑定到承诺，请尝试以下操作：

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

---

不要忘了包括ngResource依赖项。

retrieveClientName函数是错误的：$http返回一个承诺，success callback的返回值不是该函数的返回值，您无法将ng repeat绑定到一个承诺，请尝试以下操作：

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

---

别忘了包括ngResource依赖项。

一种方法是在您返回

存储时获取所有数据

$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

$scope.retrieveClientName=函数（存储）{//传入存储区，以便在此处附加结果
$http({
方法：“GET”，
网址：'http://mywebsite.com/api/v1/clients?client_id='+store.client_id
}).
成功（函数（数据、状态、标题、配置）{
return store.clients=data；//将结果附加到对象中
}).
错误（函数（数据、状态、标题、配置）{
$scope.name='Error！'；
});
}
$http({
方法：“GET”，
网址：'http://mywebsite.com/api/v1/stores/'
}).
成功（函数（数据、状态、标题、配置）{
$scope.stores=数据；
angular.forEach（$scope.stores，function（store）{
$scope.retrieveClientName（store）；//不需要。然后在这里
});
}).
错误（函数（数据、状态、标题、配置）{
$scope.name='Error！'；
});
{{store.name}
{{store.type}
{{client.name}
{{store.address}
一种方法是，当您返回
存储时，获取所有数据

$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

$scope.retrieveClientName=函数（存储）{//传入存储，以便我们可以在此处附加结果
$http({
方法：“GET”，
网址：'http://mywebsite.com/api/v1/clients?client_id='+store.client_id
}).
成功（函数（数据、状态、标题、配置）{
return store.clients=data；//将结果附加到对象中
}).
错误（函数（数据、状态、标题、配置）{
$scope.name='Error！'；
});
}
$http({
方法：“GET”，
网址：'http://mywebsite.com/api/v1/stores/'
}).
成功（函数（数据、状态、标题、配置）{
$scope.stores=数据；
angular.forEach（$scope.stores，function（store）{
$scope.retrieveClientName（store）；//不需要。然后在这里
});
}).
错误（函数（数据、状态、标题、配置）{
$scope.name='Error！'；
});
{{store.name}
{{store.type}
{{client.name}
{{store.address}
为什么要在这里重复？
{{client.name}
clientName不是字符串吗？为什么要在这里重复？
{{client.name}
clientName不是字符串吗？如果不使用承诺解决方案，这会中断，不是吗？你说的“承诺解决方案”是什么意思
$http
本身已经返回了一个承诺，因此您已经在使用一个承诺，而没有提及它。我得到了“无法读取未定义的属性”这就是我认为某种回调是missedOh的原因。。。在函数中的
$http
之前添加一个
返回
，应该可以处理这个问题。我已经更新了所有代码，这样它就可以在没有
的情况下工作。然后
看起来更干净。太棒了！它很好，很好的解释，很好的解决方案，我的理解是，不使用承诺解决方案，它就会破裂，不是吗？你说的“承诺解决方案”是什么意思
$http
本身已经返回了一个承诺，因此您已经在使用一个承诺，而没有提及它。我得到了“无法读取未定义的属性”这就是我认为某种回调是missedOh的原因。。。在函数中的
$http
之前添加一个
返回
，应该可以处理这个问题。我已经更新了所有代码，这样它就可以在没有
的情况下工作。然后
看起来更干净。太棒了！它很好，很好的解释，很好的解决方案，对我的理解看起来很好，但我没有找到任何与我的案例相匹配的例子看起来很好，但我没有找到任何与我的案例相匹配的例子