0

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?

Joel Johnson
  • 31
  • 1
  • 2

1 Answers1

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?

Community
  • 1
  • 1
Erik Barke
  • 444
  • 5
  • 12
  • Thank you. However. You did not answer the question. The situation is different and I already know the approach you have outlined above. – Joel Johnson Sep 04 '16 at 13:21
  • 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. https://docs.angularjs.org/api/ng/function/angular.element – Erik Barke Sep 04 '16 at 19:11