使用Angularjs指令对齐元素

Question

我想用Angular指令创建一个类似于表格的效果。

我现在可以对齐标题列，并试图了解其他元素如何在标题下对齐。

Plnkr这里：http://plnkr.co/edit/yTDxfvkCJHwrEDZGQJeX

请咨询

Answer 1

如果你让他们出现在正确的顺序可以稍微调整你身体的值：

$scope.body = [ 
       ['abc','def','ghi','jkl'], 
       ['123','456','789','222'] 
       ]; 

然后，你可以在一个做到这一点模板很容易。以下是隔离范围示例：

demo.directive("customTable",function(){ 
    return ({ 
      restrict : "A", 
      scope: { 
       header: '=', 
       body: '=' 
      }, 
      template: '<table class="box"><tr><th ng-repeat="head in header">{{head.column}}</th></tr><tr ng-repeat="row in body"><td ng-repeat="cell in row">{{ cell }}</td></tr></table>' 
    }); 
    function link($scope, element, attributes){  
     /* how to make the elements in $scope.body coincide with those in $scope.header*/ 
    } 
}); 

而这里是一个forked plunker。