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使用（key，value）表示法来迭代模型本身，而不是尝试通过构建名称来引用模型中的值。有关详细信息，请查看官方文档的Iterating over object properties部分。

数据表使用角度js中的指令

2 个答案: