如何使2列与角

我有这个代码在角模板，它只是左侧的标题和右上方的数据。如何使2列与角

<div class="panel-body"> 

     <table class="table table-striped"> 
      <tr ng-repeat="f in fields"> 
       <th>{{ f }}</th> 
       <td>{{ data[f] }}</td> 
      </tr> 

     </table> 

    </div>

但是，而不是一行中的一个字段，我想有一个行中的2个字段和第二个行中的第三个字段和第四个字段等等。

让我有2列布局

<tr><th>{{ f }}</th> 
<td>{{ data[f] }}</td> 
<th>{{ f }}</th> 
<td>{{ data[f] }}</td> 
</tr> 


field = ['id', 'name', 'username', 'email', 'age'] 

data = [{id:1, name: 'john', username: 'john', age: 20, email: 'test'}]

我想要的结果是

<tr><td>id:</td><td>1</td><td>name:</td><td>john</td></tr> 
<tr><td>username:</td><td>john</td><td>age:</td><td>20</td></tr>

这应该与NG-重复比较硬编码的东西

来源

2015-06-20 user3214546

你能分享你的'fields'对象？ – Vineet

@Vineet'field'是一个列表'['id'，'name'，'age'，'email']' – user3214546

http://stackoverflow.com/questions/18564888/iterate-over-chunks-of-an -array-using-ng-repeat – Vineet

这里有一个答案。我不确定这正是你想要的，但我认为它很接近：http://plnkr.co/edit/ADKu2WEb9TyvEXASOJyz?p=preview

请注意，我使用ng-repeat-start/ng-repeat-end来处理你想要做的多线事情：

<body ng-app="example" ng-controller="ExampleController"> 
    <table> 
    <tr ng-repeat-start="row in data"> 
     <td>{{ label(0) }}:</td> 
     <td>{{ value(row, 0) }}</td> 
     <td>{{ label(1) }}:</td> 
     <td>{{ value(row, 1) }}</td> 
    </tr> 
    <tr ng-repeat-end> 
     <td>{{ label(2) }}:</td> 
     <td>{{ value(row, 2) }}</td> 
     <td>{{ label(3) }}:</td> 
     <td>{{ value(row, 3) }}</td> 
    </tr> 
    </table> 
</body>

剩下的只是一个超级简单的模块和控制器：

angular.module('example', []) 
    .controller('ExampleController', function ($scope) { 
    var fields = [ 'id', 'name', 'username', 'email', 'age' ]; 
    $scope.data = [{id:1, name: 'john', username: 'john', age: 20, email: 'test'}]; 

    $scope.label = function (fieldNumber) { 
     return fields[fieldNumber]; 
    }; 

    $scope.value = function (row, fieldNumber) { 
     return row[fields[fieldNumber]]; 
    } 
    });

来源

2015-06-20 12:28:05

它不适合我。这将适用于任何数量的字段，或者您只有硬编码的1,2,3,4字段 – user3214546

@ user3214546是的，它被硬编码为四个字段，您没有对变化的字段数量进行任何说明。你可以在另一个里面重复两个ng。一个经过字段的前半部分[0到（n/2） - 1]和第二个字段[（n/2）到（n-1）]。但是，您最好始终拥有偶数个字段，否则您的表格格式将变得不可靠（一行三个字段，下一个只有两个字段）。而且，这个视图开始变得有点复杂，你可能想考虑将其中的一部分引入指令来简化它。 –

您好我试过，但做您必须将您的回复更改为以下格式

$scope.data = { 
    data1: { 
     id: 1, 
     name: 'john', 
    }, 
    data2: { 
     username: 'john', 
     age: 20 
    } 
};

，你不需要字段变量

下面是如何有重复你html的虽然我没有给你两列

<table class="table table-striped"> 
      <tr ng-repeat="x in data"> 
       <td ng-repeat="(key,val) in x">{{key}} : {{val}}</td> 
      </tr> 

     </table>

来源

2015-06-20 10:48:42

https://jsfiddle.net/Siddharth_Pandey/acyj514t/ –

@任何给他负面的人不要阻止一个刚刚声明的stackoverflow的人。是的，我知道他的回答不对，但至少他尝试过。 :) – squiroid

@squiroid我可能会理解错误的问题，但我的答案是工作Thanx支持 –

如何使2列与角

回答

相关问题