Execute a function inside ng-repeat in AngularJS

Question

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?

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
– 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
– Ardenexal, Commented Dec 4, 2015 at 9:44

Synapse · Accepted Answer · 2015-12-04 10:28:48Z

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

Check your console for the action

edited Dec 4, 2015 at 10:28

answered Dec 4, 2015 at 9:45

Synapse

9016 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

s.milziadi Over a year ago

Thanks @Synapse. I've values in myDirective. How to show them in HTML? Or pass them to the controller $scope?

Synapse Over a year ago

I've updated the example above to show you how to access inside the template the passed data

yukuan · Accepted Answer · 2015-12-04 09:52:35Z

0

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

answered Dec 4, 2015 at 9:52

yukuan

5615 silver badges18 bronze badges

Comments

pragya sharma · Accepted Answer · 2015-12-04 09:57:54Z

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

Jonatas Walker · Accepted Answer · 2015-12-04 10:15:29Z

0

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.

edited Dec 4, 2015 at 10:15

Jonatas Walker

14.3k6 gold badges57 silver badges82 bronze badges

answered Dec 4, 2015 at 9:42

Ágoston Székely

2421 silver badge10 bronze badges

Collectives™ on Stack Overflow

Execute a function inside ng-repeat in AngularJS

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related