在angularjs ng-repeat中调用函数答案

【问题标题】：Calling function inside angularjs ng-repeat在angularjs ng-repeat中调用函数
【发布时间】：2016-07-21 13:22:04
【问题描述】：

我是 angularjs 新手，正在创建一个 phonegap 项目。在我的项目中，我使用 WP JSON API User Plus Plugin 来获取 json 格式的数据，API 给出的响应内容很少，我还需要调用另一个 API，参数来自之前的 API。是否可以在 ng-repeat 中调用 API 来加载不同的数据。

我在 json 中获取数据，并在 ng-repeat 中加载数据，我试过这样

<tr ng-repeat="app in multipleApps" ng-init="getActivationDate(app)">
    <td><h4> {{ app.Name }} </h4></td>
    <td> <img src="{{ app.ava_img }}"/> </td>
</tr>

调用下面的函数，

$scope.getActivationDate = function(app) {
  Service.getActivationDate(app.name)
    .then(function(response) {
       var date = response.data.image;  
       $scope.app.ava_img = date;
     },
   // ...
};

我得到的输出是显示所有“app.ava_img”的相同图像，但服务的响应不同。请就这个问题提出建议，但我不知道如何将它与 ng-repeat 一起使用。

不胜感激，

【问题讨论】：

不是上述问题的解决方案，但 imo 最好已经将 img 包含在初始 API 调用中。现在您必须为每次迭代调用一个 API 方法。通过在初始 API 调用中包含所需数据来减少 API 调用。然后您可以通过app.img 访问所需的数据，就像您对名称值字段所做的那样。正如我所看到的，您正在设置$scope.app.ava_img = date;，而您只想将其设置为方法构造函数传递的对象，例如app.ava_img = date;

标签： javascript angularjs json cordova angularjs-ng-repeat

【解决方案1】：

首先，我鼓励您阅读ng-repeat 的文档。我假设app 是一个对象，multipleApps 是一个包含这些对象的数组。

$scope.app.ava_img = data; 表示您正在将 $scope 上的 app 变量上的 ava_img 属性设置为您拥有的数据。因此，将一组对象分配给多个应用程序。

例如：$scope.multipleApps = [ {name:'a', ava_img:'a.jpg' }, {name: 'b', ava_img: 'b.jpg' } ]

【讨论】：

【解决方案2】：

使用

<tr ng-repeat="app in multipleApps" ng-controller="ItemController">
    <td><h4> {{ app.Name }} </h4></td>
    <td> <img src="{{ app.ava_img }}"/> </td>
</tr>

并在您的应用中定义一个新控制器：

angular.module("yourapp").controller("ItemController", function($scope, Service){
    Service.getActivationDate($scope.app.name).then(function(response) {
         var date = response.data.image;  
         $scope.app.ava_img = date;
    }
});

然后，ng-repeat 的每次迭代都会有自己的 ItemController 实例，具有不同的 $scope。

【讨论】：

【解决方案3】：

我并不完全清楚你想要完成什么，但我明白了它的要点。

ng-init

首先，我会避免使用ng-init 来调用函数。 ng-init 通常是我用来初始化对象上的一些微不足道的值，该对象特定于以某种方式帮助 UI。文档甚至提到了这一点 - https://docs.angularjs.org/api/ng/directive/ngInit

将逻辑链接在一起的常用方法 - 承诺

作为 Angular 的新手，您可能已经遇到过 Promise。任何时候你都在做类似的事情：

someService.getSomething()
.then( function( rsp ){ ... })
.catch( function( err ){...})

...您正在使用 Promise API。正如我之前所说，我对你的申请并不完全清楚，所以我会做一些假设。

我假设multipleApps 是 API 调用的结果，还是您从本地列表中获取它？让我们使用 API 调用。

appService.getApps()
.then( function( rsp ){
    return $scope.multipleApps = rsp.data.data //you structure may differ
})

因此，您正在 then 处理程序中处理 rsp。我们需要做的就是将另一个系列的 Promise 链接在一起。我们可以遍历multipleApps 中的每个app，然后为响应中的对象分配适当的值，但角度为我们提供了更好的方法。让我们使用$q。 $q 为我们提供了 .all API。文档在这里 - https://docs.angularjs.org/api/ng/service/$q#all

这是我的使用方法：

appService.getApps()
.then( function( rsp ){

    var multipleApps = rsp.data.data

    var rqsts = []
    for( var app, i = 0; i < multipleApps.length; i++ )
    {
        app = multipleApps[ i ]
        rqsts.push( appService.getActivationDate( app ))
    }

    $q.all( rqsts )
    //this triggers when ALL individual requests have returned
    .then( function( rsps ){

       //rsps is an array of rsp objects from the individual calls above
       for( var iRsp, i = 0; i < rsps.length; i++ )
       {
           iRsps = rsps[ i ]
           multipleApps[ i ].ava_img = iRsps.data.img
       }

       //we're assigning to scope after we've fetched all the data
       $scope.multipleApps = multipleApps
    })
})

【讨论】：