Question

我正在使用AngularJs 1.5 RC构建。我有一个视图，其中我使用ng-repeat迭代集合，如此

<tr ng-repeat="user in users">
    <td>{{user.JobID}}</td>
    <td>{{getManager(user.userID)}}</td>
    <td>{{user.StatusDesc}}</td>
    <td>{{user.StartedAt}}</td>
</tr>

这里的想法是使用getManager函数来获取users集合中每个用户的管理器名称。顺便说一句，我必须使用这种方法，因为API没有向我返回所有信息。

这就是getManager函数现在的样子。

 $scope.getManager = function($id) {
      return "John Doe";
  }

整个控制器如下所示

var app = angular.module('userapp', ['ui.bootstrap']);

app.controller('MainController', ['$scope','$http', function($scope, $http) {

  $scope.getUsers = function() {

    $http.get("http://localhost/getUsers").
       success(function(data, status, headers, config) {
         $scope.users = data.resource;
       }).
       error(function(data, status, headers, config) {
         // log error
         console.error("An error as encountered. Error follows:");
         console.error(data);
       });
  }

  $scope.getManager= function($id) {
      return "John Doe";
  }


}]);

所以在我的页面视图中，我将“John Doe”作为所有用户的经理。

问题每当我试图为用户获得真正的经理时，问题就开始了。所以，如果我用以下函数替换我的虚拟getManager

  $scope.getManager = function($id) {
      $http.get("http://localhost/user/manager/"+$id).
         success(function(data, status, headers, config) {
            return (data.resource[0].ManagerName);

         }).
         error(function(data, status, headers, config) {
           // log error
           console.error("An error as encountered. Error follows:");
           console.error(data);
         });
  }

AngularJs开始抱怨并且失败并发生以下情况 https://docs.angularjs.org/error/$rootScope/infdig?p0=10&p1=%5B%5D

你能告诉我这里可能会发生什么吗？请注意，我是一个Angular noob ，因此您的耐心将得到很好的赞赏。

由于

Answer 1

你应该在{{}}插值中以这种方式调用ajax。它会在每个摘要周期被调用，并会抛出$rootScope/infdig错误。

因此，我建议您在从服务器检索数据后立即调用getManager方法。然后在从服务器获取数据后，您需要通过传递getManager来调用UserId方法（看看我通过返回数据来更改getManager实现以返回managerName）。获取managerName后，您需要将该管理器名称绑定到用户对象＆amp;在HTML上使用{{user.ManagerName}}。

<强>标记

<tr ng-repeat="user in users">
    <td>{{user.JobID}}</td>
    <td>{{user.managerName}}</td>
    <td>{{user.StatusDesc}}</td>
    <td>{{user.StartedAt}}</td>
</tr>

<强>代码

$scope.getUsers = function() {
   $http.get("http://localhost/getUsers")
    .success(function(data, status, headers, config) {
      $scope.users = data.resource;
      angular.forEach($scope.users, function(user){
         (function(u){
             $scope.getManager(u.UserID).then(function(name){
                 u.ManagerName = data;
             })
         })(user);
     })
   })
 };


 $scope.getManager = function($id) {
      return $http.get("http://localhost/user/manager/"+$id).
         then(function(response) {
            var data = response.data;
            return (data.resource[0].ManagerName);
         },function(error) {
           console.error("An error as encountered. Error follows:");
         });
 };

旁注

不要使用.success＆amp; $ http调用上的.error函数原样   弃用。

Answer 2

这是一个非常糟糕的做法。如果您有N个用户，则会发送N个查询以获取每个数据。您应该在$scope.getManager = function($id) { return $http.get("http://localhost/user/manager/"+$id) ... }响应中返回此数据。

您可以尝试：

{{1}}

在ng-repeat中调用另一个函数

2 个答案: