Таблица данных с использованием директивы в угловых js

Question

здесь я пытаюсь создать свою собственную директиву. Я хотел создать таблицу данных. я не знаю, я делаю что-то неправильно. Пожалуйста, помогите мне найти js-fiddle код;

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

Answer 1

Замените шаблон, ниже:

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>" 

Answer 2

Похоже, что вы делаете шаблон немного сложнее, чем это должно быть. Вот что я сделал:

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

Более конкретно, шаблон можно переписать в виде:

<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> 

Вместо того, чтобы ссылаться на значения в модели путем создания имени, вы можете просто перебирать над сама модель, используя нотацию (ключ, значение) с ngRepeat. Обратитесь к разделу Iterating over object properties официальных документов за дополнительной информацией.