input:not([type="checkbox"]) not working in angular test

Question

Below is my compiled template in beforeEach function

template = '<form name="configForm">' +
                  '<input type="number"/>' +
                  '<input type="checkbox"/>' +
                  '<input type="text"/>' +
                  '<div class="form-error" ng-show="configForm.$error.max">Error</div>' + 
                  '</form>';
element = angular.element(template);   
element = $compile(element)($scope);

Why is below find method returning me empty results?

var dirElementInput = element.find('input:not([type="checkbox"])');
console.log(dirElementInput); 
console.log(dirElementInput.length);

But when i use it like this, it works:

var dirElementInput = element.find('input');
console.log(dirElementInput); 
console.log(dirElementInput.length);

Object{0: <input type="number">, 1: <input type="checkbox">, 2: <input type="text">, length: 3}

LOG: 3

Stuart · Accepted Answer · 2016-11-25 11:34:57Z

1

The jQueryLite that Angular uses, the find() method is limited to finding by tag name, so you cannot use :not here like you would in the full jQuery library....

An alternative would be to write a small method to filter the input types.

For reference, here's the Angular Documentation on find().

answered Nov 25, 2016 at 11:34

Stuart

6,7692 gold badges29 silver badges42 bronze badges

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

Comments

Community · Accepted Answer · 2020-06-20 09:12:55Z

AngularJs uses jQlite for DOM manipulation which is a lightweight implementation of the jQuery DOM manipulation library. The problem is that jQlite doesn't support those complex selector, according to the docs:

find() - Limited to lookups by tag name

angular.element - Keep in mind that this function will not find elements by tag name / CSS selector. For lookups by tag name, try instead angular.element(document).find(...) or $document.find(), or use the standard DOM APIs, e.g. document.querySelectorAll().

Therefore, if you want to use complex selector you can use jQuery instead, or use documento.querySelector().

For using AngularJs with jQuery instead of jQlite, you can use the ngJq directive, this way angular will look to window.jQuery instead of its internal jQlite.

<!doctype html>
<html ng-app ng-jq="jQuery">
...
...
</html>

Or in the last case you can always fallback to javascript:

var inputs = angular.element(document).find('input');

var nonCheckBoxArray = [].filter.call(elements, function(elm) {
    return elm.type != 'checkbox';
});

var inputsNonCheckBox = angular.element(nonCheckBoxArray);

Collectives™ on Stack Overflow

input:not([type="checkbox"]) not working in angular test

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related