使用Angularjs指令对齐元素 [英] Aligning elements using Angularjs directives

问题描述

我想创建采用了棱角分明的指令表般的效果。

I am trying to create a table-like effect using Angular directives.

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

I am able to align the header columns now and am trying to understand how the other elements can be aligned below the header.

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

Plnkr here: http://plnkr.co/edit/yTDxfvkCJHwrEDZGQJeX

请咨询

推荐答案

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

If you can slightly adjust your body values so that they occur in the correct order:

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

然后，您可以在模板中做到这一点很容易。这里是隔离范围的例子：

Then, you can do this in a template easily. Here is an example with Isolated Scope:

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*/
    }
 });

这里是一个分叉plunker 。

这篇关于使用Angularjs指令对齐元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！