CODEWITHSUNDEEP
jqueryangularjsangularjs-ng-repeat
cihangir zengin
cihangir zengin

Reputation: 478

I couldn't select tr's with ng-repeat inside tbody of the table?

I am trying to write a directive for table with angularjs , but selecting table > tr resulting with only the first row of the table. tr's inside tbody is not included in result.When I remove ng-repeat="header in headers" from this statement 

<table>
    <thead>
        <tr>
            <th ng-repeat="header in headers">{{header}}</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="header in headers">   // I removed ng-repeat to select all rows
            <td ng-repeat="header in headers">{{header}}</td>
        </tr>
    </tbody>
</table>

all rows of the table are selected successfully .I can see four tr objects with console.log. How can I select all rows inside the table in directive linking function? Thanks for your time.

Here is my plnk: http://plnkr.co/edit/fvvC85

Upvotes: 1

Views: 921

Answers (2)

Archna Rangrej
Archna Rangrej

Reputation: 664

compile : function($element, $attrs){
    return function(scope,element,attrs){
        setTimeout(function() {
             console.log(element.find('tbody').children());
        },100);

    };
}

Move the code to Timeout function.

Upvotes: 0

AlwaysALearner
AlwaysALearner

Reputation: 43947

It seems that the directive loads before ng-repeat has completed. I moved your code into $timeout and I see it working. 

$timeout(function(){
    console.log(element.find('tr'));
    console.log(element.find('tr').length);
},1000);

You would need to inject $timeout to make this work:

directives.directive('zenTable', function($compile,$timeout) {

Not sure if this is an ideal approach though.

Upvotes: 2

Related Questions