Question

我有一个对象数组，我需要以两列布局显示有些列目前的数据比其他列多，所以我需要等高行。

我使用bootstrap来显示数据，但它没有等高行。我也使用了clearfix但不起作用。

<ng-include src="itemTemplateSrc" ng-repeat-start="tag in item.fields | filter:filterTagsByTagName" class="col-md-12"></ng-include>
<div class="clearfix" ng-if="$index%2===1"></div>
<div ng-repeat-end=""></div>

现在我想用html显示数据，两列布局而不拆分我的数组，因为我也有过滤器。

如何在HTML表格中显示单个对象数组中的数据。

Answer 1

使用ng-repeat显示表中的数据就像重复一组行一样简单：

<table>
   <thead>
      <tr>
         <th>Name</th>
         <th>Age</th>
      </tr>
   </thead>
   <tbody>
      <!-- Now just ng-repeat the rows -->
      <tr ng-repeat="user in $ctrl.users">
         <td>{{user.name}}</td>
         <td>{{user.age}}</td>
      </tr>
   </tbody>
</table>

如果您需要all the row heights be equal，那么您需要使用一些CSS来实现这一目标。

如果你需要它们都是相同的高度，根据它们中的内容，那么你将需要使用JavaScript。

Answer 2

如果您将问题视为具有单列的2个表而不是1个具有2列的表，则非常简单。使用$ odd和$ even属性。

<div>
    <div class="col-md-6">
        <table class="table table-striped">
            <tbody>
                <tr ng-repeat="item in items">
                    <td ng-if="$even">...</td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="col-md-6">
        <table class="table table-striped">
            <tbody>
                <tr ng-repeat="item in items">
                    <td ng-if="$odd">...</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

Answer 3

看看这个小提琴手here。

<强>控制器

function MyCtrl($scope) {
  $scope.name = 'Superhero';
  $scope.obj = ["data-1", "data-2", "data-3", "data-4"];
  $scope.arr = Array.apply(null, {
    length: $scope.obj.length/2
  }).map(Number.call, Number);
}

<强> HTML

<div ng-controller="MyCtrl">
  <table>
  <tr ng-repeat="index in arr">
    <td>{{obj[index*2]}}</td>
    <td> {{obj[index*2+1]}}</td>
  </tr>
  </table>
</div>

基本上我创建了一个索引数组（长度是实际数组的一半），然后使用它创建一个包含2行的表并从对象中提取项目。

修改 使用过滤器支持

<强> HTML

<div ng-controller="MyCtrl"> <input type="text" ng-model="filterText"/> <table> <tr ng-repeat="item in items = (obj | filter: filterText)" ng-show="$index < arrLength"> <td>{{items[$index*2]}}</td> <td> {{items[$index*2+1]}}</td> </tr> </table> </div>

<强>控制器

function MyCtrl($scope) { $scope.name = 'Superhero'; $scope.obj = ["data-1", "data-2", "data-3", "data-4"]; $scope.arrLength = $scope.obj.length / 2; $scope.arr = Array.apply(null, { length: $scope.obj.length/2 }).map(Number.call, Number); }

请参阅更新后的过滤器here。

它支持基本过滤器。

Answer 4

听起来你可能想要使用表格。表将自动使行具有相同的高度。

我不知道你是否想要每一行都是相同的高度，但使用一个表至少会使同一行的列在同一高度。

这也使用bootstrap类。把它放在div.row＆gt; div.col - ## - xx中，它应该是你想要的一点造型。

最后，我放了一个ng-if =＆＃34; vm.array [$ index + 1]＆＃34;在第二栏。如果数组中有奇数个对象，这将隐藏表中的最后一个框

<div class="table-responsive">
      <table class="table table-striped">
        <tr ng-repeat="whatever in vm.array" ng-if="!($index % 2)">
          <td>
            {{vm.array[$index]}}
          </td>
          <td ng-if="vm.array[$index + 1]">
            {{vm.array[$index + 1]}}
          </td>
        </tr>
      </table>
    </div>

使用ng-repeat创建具有两列的表

4 个答案: