javascript - Execute a function inside ng-repeat in AngularJS - Stack Overflow

admin管理员组

文章数量:1296489

I would like to execute a function inside a ng-repeat to retrieve some other data to show.

For example I've a list of Apartments. I show this list using ng:repeat, than for each Apartment I would like to show the Owner, that is not the u.Apartments. So my getInq function make a call to a service to get the owner of a specified apartment. It seems to be logic for me, but it doesn't work. It returns the "10 $digest() iterations reached. Aborting!" error.

I've this code:

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

And in the controller:

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

Any suggestion?

I would like to execute a function inside a ng-repeat to retrieve some other data to show.

For example I've a list of Apartments. I show this list using ng:repeat, than for each Apartment I would like to show the Owner, that is not the u.Apartments. So my getInq function make a call to a service to get the owner of a specified apartment. It seems to be logic for me, but it doesn't work. It returns the "10 $digest() iterations reached. Aborting!" error.

I've this code:

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

And in the controller:

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

Any suggestion?

• javascript
• angularjs

Share Improve this question Follow asked Dec 4, 2015 at 9:37 s.milziadis.milziadi 70533 gold badges1111 silver badges3333 bronze badges 2

• You should create a custom directive pass in any data you want from the ng-repeat and do any action you want. The directive will fire its link function on every ng-repeat loop – Synapse Commented Dec 4, 2015 at 9:41
• you can't have a http request as what's being returned as a function as it dosent exist when the function is called – Ardenexal Commented Dec 4, 2015 at 9:44

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

You should create a custom directive pass in any data you want from the ng-repeat and do any action you want. The directive will fire its link function on every ng-repeat loop

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./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>

Check your console for the action

the reason why this error happens is :

getInq return $scope.nomeCognome, and $scope.nomeCognome change every time when ng-repeat iterate the collection, every change will trigger the $digest cycle, which will cause a horrible result. you should avoid something like this will make $digest much plicated.

angular directives are used to manipulate the 2 way data binding, you should not call the methods, as you have shown specially from within the two ng-repeat they are basically loops, It would slow down your page loading also. you should properly create your JSON for data binding within the controller. below should be you HTML code:

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

and in controller you should create your JSON as

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

something like this

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

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

Do not use {{getInq(a.ApartmentId)}} in your html. It will generate an awful lot of http request, that is why you are getting an error.

Instead call this function for every item you need from your controller, and add to the $scope.units variable to the correct place. This will end up just enough http request, and once you have them, will stop running more.

本文标签： javascriptExecute a function inside ngrepeat in AngularJSStack Overflow