AngularJS Создайте таблицу из массива

У меня есть массив элементов, и я хочу отобразить его как таблицу с двумя столбцами.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 столбец. Вам нужно будет иметь вложенный ng-repeat в элементе <td>, чтобы получить более одного столбца или явно иметь два элемента , определенные в вашем HTML.

Вы можете попытаться написать что-то более сложное, чтобы попытаться определить, когда будет создан новый столбец или строка, но я упростил бы это, создав ваш массив во что-то, что будет немного легче потреблять: по существу 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, что угодно. Гораздо понятнее использовать '{{user.lastName}}', чем '{{items [$ index + 1]}}', не так ли? –

не только аспект читаемости; этот дизайн имеет еще один недостаток. если вы проверите вывод HTML, вы увидите 6 пустых 'tr' между каждым« использованным ». 'ng-if' заставляет их закомментировать, но они все еще существуют. – Claies

AngularJS Создайте таблицу из массива

ответ

Смежные вопросы