如何使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列與角

回答

相關問題