在angularjs ng-repeat中调用函数

时间:2016-07-21 13:22:05

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

我是angularjs的新手,已经创建了一个phonegap项目。在我的项目中,我使用WP JSON API User Plus插件来获取json格式的数据,API提供的响应内容很少,我还需要使用前一个API中的参数get调用另一个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;
     },
   // ...
};

我得到的输出是显示所有&#34; app.ava_img&#34;的相同图像,但来自服务的响应是不同的。请告知有关问题,但我不知道如何使用ng-repeat。

会很感激,

3 个答案:

答案 0 :(得分:0)

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

$scope.app.ava_img = data;表示您将$ scope上的app变量的ava_img属性设置为您拥有的数据。因此,将对象数组分配给multipleApps。

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

答案 1 :(得分:0)

使用

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

答案 2 :(得分:0)

我并不完全清楚你要完成什么,但我得到了它的要点。

NG-INIT

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

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

作为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
})

因此,您正在处理rsp处理程序中的then。我们所需要做的就是将另一系列的承诺联系在一起。我们可以迭代app中的每个multipleApps,然后为响应中的对象指定正确的值,但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
    })
})