Data Table using directive in angular js

Question

here i am trying to create my own directive. I wanted to create data table. i don't know is i am doing anything wrong.please help me to find js-fiddle code ;

<div ng-app='test'>
 <div ng-controller='ctrl'>
  {{name}}
  <div ibatable tb-head='header' model='model' columns='columns' ></div>
</div>
 </div>

(function(){
  var app=angular.module('test',[]);
 app.controller('ctrl',function($scope){
$scope.name='ajith';
$scope.header=['Name','Class'];
$scope.columns=['m.name','m.class'];
$scope.model=[{name:'ajith',class:'12'},{name:'ajith1',class:'122'}];
});
app.directive('ibatable',function(){
 return{
restrict:'A',
scope:{tbHead:'=',model:'=',columns:'='},
template:"<table><tr ><th ng-repeat='h in tbHead'>{{h}}</th></tr><tr ng-      repeat='m in model'><td ng-repeat='c in columns'>{{m.+{{c}}}}</td></tr></table>"
  //here i wnt to call m.name and m.class dynamically
};
});
})();

dont know what you re trying to do but in the fiddle replace {} with [] in $scope.header — Vanojx1
– Vanojx1, Commented Jan 25, 2016 at 13:26
Vanojx , sorry the correct fiddle is jsfiddle.net/ajithravindran/36ed11ay — Ajith
– Ajith, Commented Jan 25, 2016 at 13:30
I know it is not exactly what u are looking for , but u can do like this :) jsfiddle.net/36ed11ay/3 — Arif
– Arif, Commented Jan 25, 2016 at 13:49

rishikesh tadaka · Accepted Answer · 2016-01-25 13:44:56Z

1

Replace your template by below:

template: "<table><tr><th ng-repeat='h in tbHead'>{{h}}</th></tr><tr ng-repeat='m in model'><td ng-repeat='c in m'>{{c}}</td></tr> </table>"

answered Jan 25, 2016 at 13:44

rishikesh tadaka

4831 gold badge6 silver badges18 bronze badges

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

Comments

ssb · Accepted Answer · 2016-01-25 14:01:45Z

It looks like you're making the template a bit more complicated than it needs to be. Here's what I did:

(function(){
    angular.module('test',[])
    .controller('ctrl',function($scope){
        $scope.name='ajith';
        $scope.header=['Class','Name'];
        $scope.model=[{name:'ajith',class:'12'},{name:'ajith1',class:'122'}];
    })
    .directive('ibatable',function(){
        return{
            restrict:'A',
            scope: {
        tbHead:'=',
        model:'=',
        columns:'='
       },
            template:"<table><tr><th ng-repeat='h in tbHead'>{{h}}</th></tr><tr ng-repeat='m in model'><td ng-repeat='(key, value) in m'>{{m[key]}}</td></tr></table>"
        };
    });
})();

More specifically, the template can be rewritten as:

<table>
    <tr>
        <th ng-repeat='h in tbHead'>{{h}}</th>
    </tr>
    <tr ng-repeat='m in model'>
        <td ng-repeat='(key, value) in m'>{{m[key]}}</td>
    </tr>
</table>

Rather than try to reference values in your model by building up the name, you can just iterate over the model itself by using the (key, value) notation with ngRepeat. Check out the Iterating over object properties section of the official docs for more info.

Collectives™ on Stack Overflow

Data Table using directive in angular js

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related