Get div items with angular - angularjs

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.

Answer 1

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.

Answer 2

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
}
}
});

Answer 3

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 */}