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