javascript - 将输出结果拆分为 html 中同一表的两个水平部分

Question

我想以这种方式拆分特定结果的输出，使其适合浏览器宽度，水平分为两部分。 我将从服务中获得的行数是动态的。所以无法修复。 此外，我不想将记录视为一个部分中的一半，而另一个表中的另一部分被硬编码。 有什么方法可以通过表属性、css 或其他方式完成。

为了更好地理解我的意思，我附上了我的意思的截图。 目前我正在使用 angular js 1.1。 结果在angular js中并不是特别期望的。任何解决方案都可以。 请找到我期望的示例输出:

如果需要更多详细信息，请告诉我。

Answer 1

我认为在这种情况下，使用输入参数创建自定义指令会很舒服:items - 所有输入项和 size - 左表的行数。

angular.module('app', [])
.controller('ctrl', ['$scope', function($scope) {
    $scope.items = [];
    for(var i = 0; i < 10; i++)
      $scope.items.push({head1:i, head2:i, head3:i});
    $scope.size = 6;
}])
.directive('tables', function(){
  return{
    restrict: 'E',
    scope: {
        size: '=',
        items: '='
    },
    controller: function($scope){
      $scope.$watch('size', function(){
        $scope.tables = [
            $scope.items.slice(0, $scope.size),
            $scope.items.slice($scope.size, $scope.items.length)
        ];
      });
    },
    template: `
      <table ng-repeat='table in tables' style='float:left'>
        <thead>
          <tr>
            <th ng-repeat='head in [1,2,3]'>Head {{head}}</th>            
          </tr>
        </thead>
        <tbody>
          <tr ng-repeat='item in table'>
            <td ng-repeat='(key, value) in item'>{{value}}</td>            
          </tr>
        </tbody>
      </table>`
  }
})

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js">
</script>
<div ng-app='app' ng-controller="ctrl">
    <div>
         size: <input type='text' ng-model='size'/>
    </div>
    <tables items='items' size='size'/>
</div>