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

angularjs jqlite
user3676163 picture user3676163 · Jun 14, 2014 · Viewed 7.9k times · Source

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?

Answer

gkalpak picture gkalpak · Jun 15, 2014

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

Related questions

AngularJS - get element attributes values

How do you get an element attribute value? e.g. HTML element: <button data-id="345" ng-click="doStuff($element.target)">Button</button> JS: function doStuff(item){ angular.element(item)[0].data('id'); // undefined is not a function } Any suggestions …

Read More
How to select an element by classname using jqLite?

I'm trying to remove jquery from my Angular.js app in order to make it lighter, and put Angular's jqLite instead. But the app makes heavy use of find('#id') and find ('.classname'), which are not supported by …

Read More
AngularJS - Image "onload" event

I've been searching for an answer to simple but not trivial question: What is a right way to catch image' onload event in Angular only with jqLite? I found this question , but I want some solution with directives. So as …

Read More