在angularjs ng-repeat中调用函数

Question

I am new to angularjs, have creating an phonegap project. In my project I am using WP JSON API User Plus Plugin to fetch data in json format, The API gives the response as few contents, also I need to call another API with parameter get from the previous API. Is it possible to call an API inside an ng-repeat to load different datas.

I am getting data's in json, and load the data in ng-repeat, I have tried like this

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

which call the below function,

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

the output what i am getting is display's the same image for all "app.ava_img", but the response from service is different. please advise regarding the issue but I have no clue how to use it with ng-repeat.

It will be thankful,

Answer 1

Firstly, I encourage you to read the docs for ng-repeat . I assume app is an object and multipleApps is an array containing those objects.

$scope.app.ava_img = data; means you are setting the ava_img property on the app variable on your $scope to the data you have. So assign an array of objects to multipleApps.

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

Answer 2

Use

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

and define a new controller in your app:

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

Then, each iteration of ng-repeat will have its own ItemController instance with different $scope.

Answer 3

I'm not entirely clear on what you're trying to accomplish but I get the gist of it.

ng-init

Firstly, I would avoid using an ng-init to call a function. ng-init is usually something I'd use to initialize some trivial value on an object that's specific to helping the UI in some way. The docs even allude to this - https://docs.angularjs.org/api/ng/directive/ngInit

usual way to chain logic together - promises

As somebody who's new to Angular, you've probably encountered promises. Anytime you're doing something like:

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

... you're using the promises API. As I said earlier, I'm not entirely clear on your application so I will be making some assumptions as I go.

I assume multipleApps is the result of either an API call or you're fetching it from a local list? Let's go with the API call.

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

So you're processing the rsp in your then handler. All we need to do is chain another series of promises together. We could iterate through each app in the multipleApps , then assigning the proper value to the objects on the response, but angular provides us with a better way. Let's use $q . $q provides us with the .all API. Docs here - https://docs.angularjs.org/api/ng/service/$q#all

Here's how I'd use it:

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