CODEWITHSUNDEEP
formsangularjsangularjs-ng-repeat
bigbaka
bigbaka

Reputation: 35

How to count input tags created by ng-repeat

I am working on an Angular app that has a large survey form. I am making a status bar that will indicate what percentage of the form has already been completed. The form contains 9 input fields that are written directly into the html, and about 50 that occur as a result of ng-repeating.

Part of my planned implementation is to count the number of input tags on the page. This way, if the users of the application change the survey form, the code will still handle the modifications. I wrote the following code in the survey's controller to store the number of input tags on the page:

$scope.numberOfInputFields = angular.element($document[0].querySelectorAll('input')).length;

My issue is that the code above returns the number of input fields that are directly written into the html, but does not count any of the input tags written by ng-repeat.

I believe that the code written above is being executed before ng-repeat renders, but I do not know how to proceed.

Upvotes: 1

Views: 270

Answers (2)

runTarm
runTarm

Reputation: 11547

It seems like at the time your counting statement is executed, the ng-repeat hasn't finished rendering yet.

You could try to defer the execution by a $timeout service:

$timeout(function () {
  $scope.numberOfInputFields = angular.element($document[0].querySelectorAll('input')).length;
});

You may have to change the code that use the $scope.numberOfInputFields though.

However, it would be better if you can know the input count without counting on the DOM directly.

Upvotes: 0

Filippo oretti
Filippo oretti

Reputation: 49817

As per doc

<input type="text" ng-repeat="i in [0,1,2,3,4,5]"  ng-value="$index" />

<input type="text" ng-repeat="i in [0,1,2,3,4,5]" ng-value="$last" />

Just :

$index number iterator offset of the repeated element (0..length-1)

$first boolean true if the repeated element is first in the iterator.

$middle boolean true if the repeated element is between the first and last in the iterator.

$last boolean true if the repeated element is last in the iterator.

$even boolean true if the iterator position $index is even (otherwise false).

$odd boolean true if the iterator position $index is odd (otherwise false).

Upvotes: 1

Related Questions