Question

我想在ng-repeat中执行一个函数来检索要显示的其他数据。

例如，我列出了公寓。我使用ng:repeat显示此列表，而不是我希望向所有者显示的每个公寓，而不是u.Apartments。因此，我的getInq函数会调用服务来获取指定公寓的所有者。这似乎是我的逻辑，但它不起作用。它会返回 "10 $digest() iterations reached. Aborting!" 错误。

我有这段代码：

<div ng:repeat="u in units">
            <div ng:repeat="a in u.Apartments">
                <div class="targhetta" style="margin-top:10px">{{a.Name}}</div>
                <br />{{getInq(a.ApartmentId)}}
                <table>
                    <tr ng:repeat="cs in a.CS">
                        <td>{{cs.Position}}</td>
                        <td>{{cs.Code}}</td>
                    </tr>
                </table>
            </div>
        </div>

在控制器中：

$scope.getInq = function (idApp) {
            $http.get('http://localhost:8081/api/registry/GetLastInq?processdata=' + (new Date()).getTime() + '&appartamentoId=' + idApp, { headers: headers })
            .success(function (data2) {
                $scope.nomeInquilinoVw = data2.Name;
                $scope.cognomeInquilinoVw = data2.Surname;
                $scope.nomeCognome = $scope.nomeInquilinoVw + " " + $scope.cognomeInquilinoVw;
            })
            .error(function () {
                $scope.success = false;
                $scope.error = "There was an error!";
            });
            return $scope.nomeCognome;
        }

有什么建议吗？

Answer 1

您应该在ng-repeat的任何数据中创建自定义指令传递，并执行您想要的任何操作。该指令将在每个ng-repeat循环上激活其链接函数

var app = angular.module('myApp', [])
.controller('myCtrl', function($scope){
  
  $scope.data = ['a', 'b', 'c'];
  
})
.directive('myDirective', function(){
  return {
    restrict: "A",
    template: '<div>{{ myDirective }}</div>', // where myDirective binds to scope.myDirective
    scope: {
      myDirective: '='
    },
    link: function(scope, element, attrs) {
      console.log('Do action with data', scope.myDirective);
    }
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp">

  <div ng-controller="myCtrl">
  
    <ul>
      <li ng-repeat="item in data" my-directive="item">{{ item }}</li>
    </ul>
    
  </div>
  
</div>

检查控制台是否有动作

Answer 2

请勿在html中使用{{getInq(a.ApartmentId)}}。它会产生大量的http请求，这就是你收到错误的原因。

而是从控制器为您需要的每个项目调用此函数，并将$scope.units变量添加到正确的位置。这将最终得到足够的http请求，一旦你拥有它们，将停止运行更多。

Answer 3

发生此错误的原因是：

getInq返回$ scope.nomeCognome，并且每当ng-repeat迭代集合时，$ scope.nomeCognome都会更改，每次更改都会触发$ digest循环，这将导致可怕的结果。你应该避免这样的事情会使$ digest变得非常复杂。

Answer 4

angular指令用于操作2路数据绑定，你不应该调用方法，因为你在两个ng-repeat中特别显示它们基本上是循环，它也会减慢你的页面加载速度。您应该在控制器中正确创建用于数据绑定的JSON。下面应该是你的HTML代码：

<div ng:repeat="u in units">
            <div ng:repeat="a in u.Apartments">
                <div class="targhetta" style="margin-top:10px">{{a.Name}}/div>

                <table>
                    <tr ng:repeat="cs in a.CS">
                        <td>{{cs.Position}}</td>
                        <td>{{cs.Code}}</td>
                    </tr>
                </table>
            </div>
        </div>

并且在控制器中你应该将你的JSON创建为

units=[
      { u.Appartment:[{a.cs[value1,value2]},{},{}]},{},{}]

类似这样的事情

for( var i=0; i<u.Apartment.length;i++)
{

  u.Apartment[i].cs=$scope.getInq(u.Apartment[i].Id);
}

在AngularJS中执行ng-repeat内的函数

4 个答案: