How do I get Child HTML elements attribute values using AngularJS

Question

I have the html below:

<div class="div1">
     <span class="span1" content="Apple">
     </span>
     <span class="span2" content="Orange">
     </span>
</div>
<div class="div2">
     <span class="span1" content="Mazda">
     </span>
     <span class="span2" content="Nissan">
     </span>
</div>

I need to pull out the value of attribute "content" which is "Mazda" from div2 -> span1.

Using JQuery, I'd do it this way:

$(".div2 .span1").attr("content");

How do I achieve the same using AngularJS?

Community · Accepted Answer · 2017-05-23 10:29:08Z

1

Getting the value of the element using jQuery or vanilla javascript, for instance document.getElementById, kind of defeats the whole purpose of AngularJs and similar frameworks.

Using the databinding and looping capabilites of AngularJS 1.x your html could look something like this:

<div class="div1">
     <span class="span1" ng-repeat="fruit in fruits">
         {{fruit}}
     </span>
</div>

<div class="div2">
     <span class="span1" ng-repeat="car in cars">
         {{car}}
     </span>
</div>

There's a great thread here if you want to dive in: "Thinking in AngularJS" if I have a jQuery background?

edited May 23, 2017 at 10:29

CommunityBot

11 silver badge

answered Sep 3, 2016 at 11:41

Erik Barke

4545 silver badges12 bronze badges

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

2 Comments

Joel Johnson Over a year ago

Thank you. However. You did not answer the question. The situation is different and I already know the approach you have outlined above.

Erik Barke Over a year ago

Well, if you don't want to use databinding I guess you might want to take a look at Angular directives, they're designed for manipulating the dom tree without mixing the view with logic. In a directive you also have access to jQuery lite, a stripped down version of jQuery that ships with Angular. docs.angularjs.org/api/ng/function/angular.element

Collectives™ on Stack Overflow

How do I get Child HTML elements attribute values using AngularJS

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related