Блог

Главная - Вопросы по программированию - Как отобразить массив в таблице с помощью ng-repeat

Как отобразить массив в таблице с помощью ng-repeat

#angularjs #html-table #angularjs-ng-repeat

#angularjs #html-таблица #angularjs-ng-repeat

Вопрос:

В отличие от других данных JSON, у меня есть простые массивы из двух.

 $scope.land = [ elephant, tiger, zebra ];
$scope.water = [ fish , octopus, crab];

Я хочу поместить массив в таблицу с помощью ng-repeat . Я пробовал это, но данные не отображаются в правильном формате.

 <table class="table table-dark">
    <thead>
        <tr>
            <th scope="col">LAND</th>
            <th scope="col">WATER</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="l in land track by $index">
            <td>{{l}}</td>
            <td>fish</td>
        </tr>
    </tbody>
</table>

РЕДАКТИРОВАТЬ: —
ошибка в данных, отображающих вертикаль в таблице
введите описание изображения здесь

новые данные :-

 $scope.land = [ 'tiger in zoo', 'tiger in jungle', 'zebra'];
 $scope.water = [ 'fish in pond'];

Комментарии:

1. Используйте JS-код в вашем контроллере, чтобы объединить два массива в один: [{земля: слон, вода: рыба}, {земля: тигр, вода: осьминог}, …], затем используйте простой, традиционный ng-repreat, отображающий каждый объект в этом одном массиве.

2. @JBNizet необходимо иметь в одном?

3. Нет, но это самый простой, очевидный и эффективный способ.

4. @JBNizet Я понял, но я не могу изменить массив, если таким образом это все равно возможно, тогда мое время будет сэкономлено.

5. Почему вы не могли этого сделать? Если вы разрабатываете приложение AngularJS, то в какой-то момент вы должны написать некоторый JS-код, а не только HTML-код. Роль контроллера заключается в том, чтобы упростить отображение содержимого в представлении. Так что да, вы можете это сделать, и вы должны. Нет веской причины, по которой вы не могли бы этого сделать.

Ответ №1:

Я думаю, вы пытаетесь отобразить элементы двух массивов рядом друг с другом (поправьте меня, если я ошибаюсь).

Вот простой способ сделать это :

 angular.module('myApp', [])
.controller('TestCtrl', function ($scope) {
    $scope.land = [ 'tiger in zoo', 'tiger in jungle', 'zebra'];
    $scope.water = [ 'fish in pond'];
    $scope.combined = [];
    var maxLength = ($scope.land.length > $scope.water.length) ? $scope.land.length : $scope.water.length;
    //length is to be determined
    for(var index = 0; index < maxLength ; index  ) {
    	$scope.combined.push({
      	land: ($scope.land[index]) ?  $scope.land[index] : '',
        water: ($scope.water[index]) ? $scope.water[index] : ''
      });
    }
}) 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="myApp" ng-controller="TestCtrl">
  <table class="table table-dark">
    <thead>
      <tr>
        <th scope="col">LAND</th>
        <th scope="col">WATER</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="item in combined">
        <td>{{item.land}}</td>
        <td>{{item.water}}</td>
      </tr>
    </tbody>
  </table> 
</div>

Комментарии:

1. Да, именно спасибо. Но почему определяется только длина участка scope.land.length ?

2. Также мои данные отображаются вертикально. Можете ли вы догадаться, почему? Я добавляю изображение в РЕДАКТИРОВАНИЕ

3. Цикл повторяется по массиву земли, который также может быть водой, если у них одинаковое количество элементов, я поместил этот комментарий только для справки

4. С обеих сторон может быть больше и меньше. Тогда как это будет возможно?

5. в этом случае вы можете взять самый длинный массив и поместить количество элементов в цикл. я обновил фрагмент для этого случая

Метки: