Angularjs: How to check if element's children contains certain element (by ID)

Question

<div id="divWrapper">
    <input id="firstInput"/>
    <div id="insideDiv">
        <input id="secondInput"/>
    </div>
</div>

This is the basic structure of my HTML. So, given an access to "divWrapper" element how do I check if it contains "secondInput".

NOTE: This is to be done without jQuery. Only using Angularjs utility functions.

UPDATE: The solution should be dynamic. Meaning it should find any child, how much ever down the level it is in the DOM tree.

UPDATE 2: Please don't get misguided by "input" element. I don't want to track the text inside it. I want to a logic which will check if me or any of my child is clicked. If NOT then hide myself and my children.

You really should be looking for a ng-model rather than looking at things by DOM related elements. — Chris
– Chris, Commented Feb 28, 2015 at 4:55
Please don't get misguided by "input" element. I don't want to track the text inside it. I want to a logic which will check if me or any of my child is clicked. If NOT then hide myself and my children. — Shardul
– Shardul, Commented Feb 28, 2015 at 5:51
This should still be driven from the controller side rather than from the DOM. Angular doesn't only track the "text" but can also keep track of Booleans set, index's of repeat items along with many other pragmatic things. Manipulating the DOM is a fragile and static way of being dynamic. — Chris
– Chris, Commented Feb 28, 2015 at 15:16
Makes total sense. But, that is what I am not actually able to figure out, after trying a loooot. Could you please help me with a code snippet? — Shardul
– Shardul, Commented Feb 28, 2015 at 19:14
I'm not entirely sure of the logic of which you're trying to do, but here is a plunker showing how you can click a checkbox to set a child to true, and display it at the same time: plnkr.co/edit/UXod6zA6f2QXefOQdIQW?p=preview — Chris
– Chris, Commented Feb 28, 2015 at 23:21

Mateusz Majewski · Accepted Answer · 2015-02-27 23:11:08Z

2

var secondInput = angular.element(document.querySelector("#divWrapper #insideDiv #secondInput"));

This will return the element you're looking for or empty if it doesn't find anything.

edited Feb 27, 2015 at 23:11

answered Feb 27, 2015 at 22:57

Mateusz Majewski

2801 silver badge10 bronze badges

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

2 Comments

Richard Szalay Over a year ago

querySelector is also available on raw DOM elements (query is applied to children), which you can obtain from an angular "element" by using the array indexer el[0]

Shardul Over a year ago

This solution is very static. I want something dynamic which can find any child node, may it be multiple levels down the tree. Something like the "find" function in jQuery.

bvaughn · Accepted Answer · 2015-02-28 03:41:27Z

0

angular.element("#someId").find("someOtherSelector") already does exactly what you want.

So for your question you could just do...

angular.element("#divWrapper").find("#secondInput"); // Empty array OR a match

answered Feb 28, 2015 at 3:41

bvaughn

13.5k49 silver badges46 bronze badges

1 Comment

James Reimer Over a year ago

Isn't jqLite's version of find limited to lookups by tag name?

Collectives™ on Stack Overflow

Angularjs: How to check if element's children contains certain element (by ID)

2 Answers 2

2 Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Related