How to use angular. Element to find and repeat multiple elements?

Question

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

If it was loaded jQuery, 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 it 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 a better way to use jQLite to accomplish this?

Answer 1

If support for IE7 or older is not required , you can use the querySelectorAll method : Element

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

Answer 2

for.

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
}