Get div items with angular

Question

As in Jquery I use each function ($.each...)to get different elements from a div selection (in my case). How can i get different row elements content from a table using angularjs?

Example :

<table id="myTable">
<tr><td>one text</td></tr>
<tr><td>two text</td></tr>
<tr><td>three text</td></tr>
</table>

Thanks.

Can you be more specific as to what you are trying to do. AngularJS is all about eliminating manually dealing with the dom. If you tell us what you want to do we can help show you the proper way to do it in angular. Specifically, what do you want to do with the row once you get it? — Daniel Tabuenca, Jan 03 '14 at 09:07
Sure i want to set the text in a formatted string like "[One text] Two text [Three text]"... but first i need the td's texts. — Tony, Jan 03 '14 at 09:10

score 2 · Answer 1 · answered Jan 03 '14 at 09:21

The correct way to do things like this is to make a directive, this is pretty easy to do.

I'm sure you are used to jquery where you would do something like:

<table id="myTable">
  <tr><td class="formatted">one text</td></tr>
  <tr><td class="formatted">two text</td></tr>
  <tr><td class="formatted">three text</td></tr>
</table>

And then do:

$('.formatted').each(function(){ ... format text here ...})

The directive is a very similar concept in angular. This would be the equivalent of the above:

<table id="myTable">
  <tr><td formatted-text>one text</td></tr>
  <tr><td formatted-text>two text</td></tr>
  <tr><td formatted-text>class="formatted">three text</td></tr>
</table>

And then you define a directive:

myApp.directive("formattedText", function(){
  return {
    link: function(scope, element, attrs){
      var text = element.text();
      ...do some formatting on text....
      element.text(text);
    }
  }
});

In this case the link function will be called for every time angular encounters an element with a formatted-text attribute.

You can even match on other things such as class or element name, by adding a restrict: to your directive. Here is an example of the a few restrict value's and the equivalent jquery selector:

restrict: 'A'   => $('[formatted-text]').each(link)
restrict: 'C'   => $('.formatted-text').each(link)
restrict: 'E'   => $('formatted-text').each(link)

So for example if I wanted to exactly match my initial jquery example above, you would do:

myApp.directive("formattedText", function(){
  return {
    restrict: 'C',
    link: function(scope, element, attrs){
      var text = element.text();
      ...do some formatting on text....
      element.text(text);
    }
  }
});

Hopefully this makes sense and helps de-mistify directives a bit.

score 1 · Accepted Answer · edited May 23 '17 at 12:11

What do you want to do with the elements?

Using Angular, DOM manipulation should be reduced as much as possible and be strictly restricted to directives.

Here is some good reading stuff: How do i think in Angular if i have a jQuery background

To actually answer your question, one way to do it would be creating a directive, then access the DOM node inside the directives controller:

app.directive('row',function(){

return{

    restrict: 'E',
    controller: function($scope,$element,$attrs){
      // $element is what you are searching for
    }
}

});

score 0 · Answer 3 · answered Jan 03 '14 at 09:23

If you are trying to vary the text styling according to whether it is in an odd or even row, how about using the ngRepeat and ngClass directives?

In controller:

$scope.items = ["one text", "two text", "three text"];

Template:

<table id="myTable">
    <tr ng-repeat="item in items" ng-class="{odd:$odd}"><td>{{item}}</td></tr>
</table>

Stylesheet:

.odd {/* your styling */}

Get div items with angular

3 Answers3