angular directive with tables

Question

I'm trying to use angular directive with table, but I don't see any data, when I use list I can see the data and it works properly. I'm using bootstrap for styling the table too. I really don't know what I'm doing wrong,

Hope you can help, here are the main parts of my code:

main.html:

  <table class="table">
    <thead>
        <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Username</th>
        </tr>
    </thead>
    <tbody ng-repeat="m in users">

        <my-dir my-obj="m"></my-dir>

    </tbody>
</table>

app.js:

var myApp = angular.module('myApp', ['ngRoute'])

myApp.config(function($routeProvider) {

    $routeProvider
        .when('/', {
        templateUrl: 'pages/main.html',
        controller: 'AppCtrl'
    })
 

});

myApp.controller('AppCtrl', function($scope) {
    

    $scope.users = [{name: 'john', age: 16}, {name: 'dani', age: 10}];
    
    
    
});

myApp.directive('myDir', function(){
    return{
        templateUrl: 'directive/mytbl.html',
        replace: false,
        scope:{
            myObj: '='
        }
    }
})

mytbl.html:

<td>{{ myObj.name }}</td>
<td>{{ myObj.age }}</td>

Brian · Accepted Answer · 2017-08-05 23:30:58Z

1

You are creating a <tbody> for each user.

Try changing to this:

<tbody>
   <tr ng-repeat="m in users" my-dir my-obj="m"></tr>
</tbody>

The directive is essentially appending it's template to the element in which it is specified (creating children of that element). So in this case, the children are those of .

edited Aug 5, 2017 at 23:30

answered Aug 5, 2017 at 20:55

Brian

5,0693 gold badges22 silver badges30 bronze badges

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

3 Comments

zb22 Over a year ago

it works now, thank you! I didn't know that it possible to put the directive inside the element, what happen actually when doing this?

Brian Over a year ago

The directive is essentially appending it's template to the element in which it is specified (creating children of that element). So in this case, the children are those of <tr>.

zb22 Over a year ago

So what is the difference between your first answer(before editing)? The directive is also a child of the <tr>

Collectives™ on Stack Overflow

angular directive with tables

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related