AngularJS從數組創建表

我有一個項目的數組，我想把它呈現爲2列的表。AngularJS從數組創建表

我做了只有一列渲染的基本實現。有什麼建議嗎？

<body ng-app="myApp" ng-controller="myCtrl"> 
    <table> 
    <tr ng-repeat="i in items"> 
     <td>{{i}}</td> 
    </tr> 
    </table> 
</body> 


var myApp = angular.module("myApp", []); 

myApp.controller("myCtrl", function($scope) { 
    $scope.items = ["12", "22", "34", "657", "129"]; 
});

https://jsfiddle.net/nkarri/9czrqLny/1/

來源

2016-01-24 neelima

哪些列 – Sajeetharan

好吧，添加第二列：'{{whatYouWantToDisplayInTheSecondColumn}}'。但是由於你在一串字符串上循環，我想知道你可能想在第二列中顯示什麼。 –

這是因爲你的HTML只有一個<td>元素，你是不是重複。由於只有1個，你只能得到1列。您需要在<td>元素中嵌套ng-repeat以獲得多個列，或明確地在您的HTML中定義了兩個<td>元素。

你可以試着寫一些更復雜的東西來試圖確定何時應該創建一個新的列或行，但是通過將你的數組創建成更容易消耗的東西來簡化事情：本質上是2維數組。這就是我會做，而不是：

<body ng-app="myApp"> 
    <div ng-controller="myCtrl"> 
     <table> 
      <tr ng-repeat="row in items"> 
       <td ng-repeat="column in row">{{column}}</td> 
      </tr> 
     </table> 
    </div> 
</body>

var myApp = angular.module("myApp", []); 

myApp.controller("myCtrl", function($scope) { 
    $scope.items = []; 
    $scope.items[0] = ["12", "22"]; 
    $scope.items[1] = ["34", "657"]; 
    $scope.items[2] = ["129", null]; 
});

https://jsfiddle.net/bntguybm/

需要注意的是，如果這些陣列是包含2倍以上的值，那麼你也將看到額外的列行是包含這些數據。

另一種方式就是這樣，它只能保證2列。您需要爲您的items對象創建一個對象數組。就像這樣：

<body ng-app="myApp"> 
    <div ng-controller="myCtrl"> 
     <table> 
      <tr ng-repeat="row in items"> 
       <td>{{row.column1}}</td> 
       <td>{{row.column2}}</td> 
      </tr> 
     </table> 
    </div> 
</body>

var myApp = angular.module("myApp", []); 

myApp.controller("myCtrl", function($scope) { 
    $scope.items = []; 
    $scope.items[0] = {}; 
    $scope.items[0].column1 = "12"; 
    $scope.items[0].column2 = "22"; 
    $scope.items[1] = {}; 
    $scope.items[1].column1 = "34"; 
    $scope.items[1].column2 = "657"; 
    $scope.items[2] = {}; 
    $scope.items[2].column1 = "129"; 
    $scope.items[2].column2 = null; 
});

https://jsfiddle.net/6v1701gx/1/

來源

2016-01-24 08:45:39 Ellesedil

我一派，想通了。這就是我使用索引創建的。

<body ng-app="myApp" ng-controller="myCtrl"> 
    <table> 
    <tr ng-repeat="i in items" ng-if="$index%7 == 0"> 
     <td>{{items[$index]}}</td> 
     <td>{{items[$index+1]}}</td> 
     <td>{{items[$index+2]}}</td> 
     <td>{{items[$index+3]}}</td> 
     <td>{{items[$index+4]}}</td> 
     <td>{{items[$index+5]}}</td> 
     <td>{{items[$index+6]}}</td> 
    </tr> 
    </table> 
</body> 

// the main (app) module 
var myApp = angular.module("myApp", []); 

// add a controller 
myApp.controller("myCtrl", function($scope) { 
    $scope.items = ['12', '22', '34', '657', '129', '11', '23', '45', '65', '9', '76', '87', '90', '33', '51']; 
});

https://jsfiddle.net/nkarri/9czrqLny/2/

來源

2016-01-24 09:00:51 neelima

這可以工作，但會顯示嚴重的設計問題。您應該有一個對象數組，而不是有一個字符串數組，其中每個對象都有一個命名字段：firstName，lastName，whatever。使用'{{user.lastName}}'比'{{items [$ index + 1]}}'更清晰，不是嗎？ –

不僅可讀性方面;這種設計有另一個缺陷。如果你檢查HTML輸出，你會在每個「used」之間看到6個空的'tr'。 'ng-if'會導致它們被註釋掉，但它們仍然存在。 – Claies

AngularJS從數組創建表

回答

相關問題