Как отобразить массив с помощью ng-repeat - PullRequest
Новая
       39

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

0 голосов
/ 23 марта 2019

У меня есть массив json в форме ": 

{ 
  "School1":  [{"name": "john", "age":"28"},
              {"name": "paul", "age":"27"}],
  "School2":  [{"name": "david", "age":"27"},
               {"name": "sil", "age":"28"}] 
}

Как отобразить в таблице в этой форме, используя ng-repeat в Angular: 

----------
Name |  Age
----------
School1            
----------
john | 28
----------
paul | 2
----------
School2
----------
david| 27
----------
sil| 28
----------

Я буду признателен за помощь в этом.

1 Ответ

0 голосов
/ 25 марта 2019

Вы можете выполнить некоторую операцию с вашими данными и создать другой объект с измененной структурой, чтобы его можно было использовать с ng-repeat, чтобы отобразить таблицу в нужной форме.

Вы можете понять этолучше с примером.

Это ваши данные, которые вы хотите отобразить в табличном представлении 

 $scope.testData = { 
      "School1":  [{"name": "john", "age":"28"},
                  {"name": "paul", "age":"27"}],
      "School2":  [{"name": "david", "age":"27"},
                   {"name": "sil", "age":"28"}] 
    }

Мы выполняем операцию над «testData», чтобы определить ключи в этом объекте JSON, которые«School1» и «School2». Следующая строка выполняет эту операцию. 

$scope.keys = Object.keys($scope.testData);

$ scope.keys будет массивом ключей: ["School1",School2"];

Затем вы можете выполнить итерациюмассив ключей и создайте еще один объект, который можно использовать с помощью ng-repeat в HTML-коде.Следующие строки выполняют создание этого объекта (tableData): 

$scope.tableData=[];
    //Iterating on array of keys
    $scope.keys.forEach(element => {
           $scope.tableData.push({
                 column : element,
                 data : $scope.testData[element]  //Getting your data from testData 
           });
     });

Финальный фрагмент кода, который будет добавлен в контроллер, будет: 

    $scope.testData = { 
        "School1":  [{"name": "john", "age":"28"},
                    {"name": "paul", "age":"27"}],
        "School2":  [{"name": "david", "age":"27"},
                     {"name": "sil", "age":"28"}] 
    }

    $scope.keys = Object.keys($scope.testData);   

    $scope.tableData=[];
    $scope.keys.forEach(element => {
        $scope.tableData.push({
            column : element,
            data : $scope.testData[element]
        });
    });

И ваш HTML-код будет выглядеть примерно так:

<table>
    <tr>
        <th>Name |</th>
        <th>Age</th>
    </tr>
</table>
<table ng-repeat="table in tableData">
    <tr>
        <th>{{table.column}}</th>
    </tr>
    <tr ng-repeat="row in table.data">
        <td>{{row.name}} | </td>
        <td>{{row.age}}</td>
    </tr>
</table>

Вы можете определенно украсить табличное представление, написав свой собственный CSS или включив любые предопределенные таблицы стилей.Надеюсь, это поможет !!

...