调用angularjs内的函数ng重复

Calling function inside angularjs ng-repeat

本文关键字：ng 重复 函数 angularjs 调用      更新时间：2023-09-26

我是angularjs的新手，正在创建一个phonegap项目。在我的项目中，我使用WPJSON API User Plus插件以JSON格式获取数据，API给出的响应内容很少，我还需要调用另一个API，参数从以前的API获取。是否可以在ng-erepeat中调用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.avaimg"的相同图像，但来自服务的响应不同。请就这个问题提出建议，但我不知道如何将其与ng重复使用。

感谢

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

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

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

使用

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

我不完全清楚你想要实现什么，但我明白了要点。

ng初始化

首先，我会避免使用ng-init来调用函数。ng-init通常是我用来初始化对象上的一些琐碎值的东西，这些值在某种程度上有助于UI。文件甚至暗示了这一点——https://docs.angularjs.org/api/ng/directive/ngInit

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

作为一个刚接触Angular的人，你可能遇到过承诺。任何时候你在做这样的事情：

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。我们所需要做的就是把另一系列承诺串在一起。我们可以迭代multipleApps中的每个app，然后为响应上的对象分配适当的值，但angular为我们提供了更好的方法。让我们使用$q。$q为我们提供了.all API。此处的文档-https://docs.angularjs.org/api/ng/service/$q#所有

以下是我的使用方法：

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
    })
})
相关文章：