Angular get tag content inside a specific ID

Question

I have an HTML template as follows:

<div id="expenses">
    <submenu>
    </submenu>
</div>

<div id="revenues">
    <submenu>
    </submenu>
</div>

I need to hold the submenu content in seperate variables. The following code works in angular:

var expenses = angular.element('#expenses')

However, I need to get one step further and get the submenu content in the variable. Something like:

var expenses = angular.element('#expenses>submenu')

But CSS selectors don't work in that function. How can I get the submenu contents?

Nothing prevents you from using jQuery alongside Angular. However, typically this is an indication you don't really "get" the Angular way. See [this Q&A](http://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background) — Johannes Jander, Mar 08 '16 at 09:24
@FarukYazıcı That solves it for you? Shall I put it as an answer? — Omri Aharon, Mar 08 '16 at 09:45

Hadi J · Answer 1 · 2016-03-08T09:30:49.990

1

you can use find() function to get child elements.

    element.find("submenu")

edited Mar 08 '16 at 09:30

answered Mar 08 '16 at 09:24

Hadi J

score 1 · Accepted Answer · answered Mar 08 '16 at 09:50

1

You can use:

document.querySelector('#expenses > submenu');

answered Mar 08 '16 at 09:50

Omri Aharon

score 0 · Answer 3 · edited Mar 09 '16 at 21:09

0

may be:

var expenses = angular.element('#expenses').children()

edited Mar 09 '16 at 21:09

user1697575

answered Mar 08 '16 at 09:25

Zamboney

3 Answers3