How to use angular.element to find and iterate over multiple elements?

Question

I am writing a directive in AngularJS and one of the things I need to do is find all of the controls inside a form and iterate over them.

If jQuery was loaded I do this:

var inputs = element.find(".ng-invalid,.ng-valid");
inputs.each(function ()
{
    var i = $(this);               

});

But since it is not loaded and I just have Angular I can only think to do something like:

var inputs = element.find("input");
//for loop thru this
var selects = element.find("select");
//for loop thru this
//....etc

Is there some better way using jQLite to accomplish this?

How about the good, old, native `querySelectorAll()` ? What browsers do you need to support ? — gkalpak, Jun 14 '14 at 18:33
Not certain yet. I may be able to live with IE8+ in which case this may be a decent solution. — user3676163, Jun 14 '14 at 18:48
you might want to read http://stackoverflow.com/questions/14994391/how-do-i-think-in-angularjs-if-i-have-a-jquery-background/15012542#15012542 — mb21, Jun 14 '14 at 19:14

score 3 · Answer 1 · answered Jun 15 '14 at 08:12

If supporting IE7 or older is not a requirement, you can use the querySelectorAll method of Element:

var controls = element[0].querySelectorAll('.ng-invalid, .ng-valid');
[].forEach.call(controls, function (ctl) {
    var c = angular.element(ctl);               
    ...
});

score -1 · Answer 2 · answered Sep 08 '16 at 07:25

-1

Use a for-loop.

var inputs = element.find(".ng-invalid,.ng-valid");
for (var index=0; index < inputs.length; index++) {
  var subElement = angular.element(inputs)[index];
  // do something with subElement
}

answered Sep 08 '16 at 07:25

Teemu Leisti

3,750
2
30
39

How to use angular.element to find and iterate over multiple elements?

2 Answers2