在angularjs ng-repeat中调用函数

Question

我是angularjs的新手，已经创建了phonegap项目。 在我的项目中，我正在使用WP JSON API User Plus插件以json格式获取数据，该API提供的响应内容很少，而且我还需要调用另一个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一起使用。

会很感激的

Answer 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' } ]

Answer 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迭代将具有不同的$ scope自己的ItemController实例。

Answer 3

对于您要完成的目标，我尚不完全清楚，但我的主旨是。

NG-INIT

首先，我将避免使用ng-init调用函数。 ng-init通常是我用来在某个对象上初始化某个琐碎值的东西，该值专门以某种方式帮助UI。 该文档甚至暗示这一点- https://docs.angularjs.org/api/ng/directive/ngInit

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

作为Angular的新手，您可能已经遇到了希望。 每当您在执行以下操作时：

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

...您正在使用promises API。 就像我之前说的，我对您的申请尚不完全清楚，所以我会做一些假设。

我认为multipleApps是API调用的结果，还是您是从本地列表中获取的？ 让我们开始API调用。

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

因此，您要在then处理程序中处理rsp 。 我们需要做的就是将另一系列的承诺链接在一起。 我们可以遍历multipleApps每个app ，然后为响应中的对象分配适当的值，但是angular为我们提供了更好的方法。 让我们使用$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
    })
})