0

Строю грид на основе JSON. Что-то вроде такого

<tr ng-repeat="person in people">
    <td>[{{$index + 1}}]  {{person.id}}</td>
    <td>{{person.firstName}}</td>
    <td>{{person.lastName}}</td>
</tr>

Вопрос в следующем: в данном коде я обращаюсь к полям коллекции напрямую (person.firstName). Что делать, если неизвестно название i-того поля? Возможно ли обратиться вроде person.fields[i]? Существует ли такой синтаксис в ангуляре?

Далее можно усложнить задачу: количество полей неизвестно (т.е. количество тэгов td, которые требуется сгенерировать динамически)

UPD

JSON: [
    {"id": "1",    "firstName": "Peter", "lastName": "Jhons"},
    {"id": "2",    "firstName": "Marcus", "lastName": "Smith"},
    {"id": "3",    "firstName": "Grotter", "lastName": "Changer"}
]

должно получиться:

<table>
  <tr>
    <th>id </th> <th>firstName </th> <th>lastName </th>
  </tr>
  <tr>
     <td>1<td> <td>‌​Peter</td><td>Jhons </td>
  </tr> 
  <tr>
     <td>2<td> <td>‌​Marcus</td><td>Smith </td>
  </tr> 
  <tr>
     <td>1<td> <td>‌​Grotter</td><td>Changer </td>
  </tr> 
 </table>
7
  • больше строчек нужно в примере, в JSON 3 строки, добавь их все в html,
    – Grundy
    2 июн 2016 в 14:13
  • строчка с th должна быть одна? или перед каждой персоной выводить его поля?
    – Grundy
    2 июн 2016 в 14:19
  • да, строка с th одна
    – user211576
    2 июн 2016 в 14:21
  • то есть набор полей у всех объектов одинаковый
    – Grundy
    2 июн 2016 в 14:22
  • да, на данном этапе задача такая
    – user211576
    2 июн 2016 в 14:24

2 ответа 2

1

ng-repeat работает как с массивами, так и с объектами

В случае массива выражение может выглядеть так

variable in expression

где variable - это значение конкретного элемента массива.

В случае объектов

(key, value) in expression

где key - это имя поля, а value - это значение поля.

angular.module('app', [])
  .controller('ctrl', function() {
    this.people = [{
      id: 1,
      lastName: 'Иванов'
    }, {
      id: 2,
      lastName: 'Петров',
      firstName: 'Петр'
    }, {
      id: 3,
      lastName: 'Кузнецов',
      firstName: 'Кузнец',
      middleName: 'Кузнецович'
    }];

  });
.people {
  background-color: yellow;
  border: 1px solid black;
  display: flex;
  justify-content: flex-start;
}
.id {
  width: 10%
}
.lastName {
  background-color: red;
  width: 25%
}
.firstName {
  background-color: green;
  width: 25%
}
.middleName {
  background-color: blue;
  color:yellow;
  flex-grow:1;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
<div ng-app="app" ng-controller="ctrl as c">
  <div class="people" ng-repeat="person in c.people">
    <div class="{{k}}" ng-repeat="(k,v) in person">{{k}} - {{v}}</div>
  </div>

</div>

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

Обновление

В случае когда отдельной строкой нужно вывести имена полей, проще всего сохранить их в отдельную переменную, которую потом использовать

angular.module('app', [])
  .controller('ctrl', function() {
    this.people = [{
      "id": "1",
      "firstName": "Peter",
      "lastName": "Jhons"
    }, {
      "id": "2",
      "firstName": "Marcus",
      "lastName": "Smith"
    }, {
      "id": "3",
      "firstName": "Grotter",
      "lastName": "Changer"
    }];
    this.fields = Object.keys(this.people[0]); //получаем ключи из первого объекта

  });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
<div ng-app="app" ng-controller="ctrl as c">
  <table>
    <tr>
      <th ng-repeat="field in c.fields">{{field}}</th>
    </tr>
    <tr class="people" ng-repeat="person in c.people">
      <td ng-repeat="field in c.fields">{{person[field]}}</td>
    </tr>
  </table>
</div>

8
  • не совсем то. Хотелось бы получить table вида <tr><td>id</td><td>firstName</td><td>lastName</td></tr><tr><td>1</td><td>Иван</td><td>Иванов</td></tr> и т.д. Т.е. чтобы первым tr шли названия полей
    – user211576
    2 июн 2016 в 12:21
  • для упрощения задачи предположим, что количество полей во всех элементах массива одинаковое
    – user211576
    2 июн 2016 в 12:24
  • @user211576, добавь в вопрос пример данных и конечной разметки, сейчас не совсем понятно что должно в итого получиться
    – Grundy
    2 июн 2016 в 12:27
  • ну вот например такой JSON [ {"id": "1", "firstName": "Peter", "lastName": "Jhons"}, {"id": "2", "firstName": "Marcus", "lastName": "Smith"}, {"id": "3", "firstName": "Grotter", "lastName": "Changer"} ]
    – user211576
    2 июн 2016 в 13:48
  • @user211576, отредактируй вопрос добавив в него входные данные, и ожидаемую разметку по ним
    – Grundy
    2 июн 2016 в 13:49
0

Такое вроде как вполне работает, в том числе и для переменного количества полей в person:

// пусть people выглядит как-то так
people = 
    [
         {id: 1, lastName: 'Иванов'}
        ,{id: 2, lastName: 'Петров', firstName: 'Петр'}
        ,{id: 3, lastName: 'Кузнецов', firstName: 'Кузнец', middleName: 'Кузнецович'}
    ];
// ...
<tr ng-repeat="person in people">
    <td ng-repeat="p in person">{{p}}</td>
</tr>

Хотя не исключено, что с порядком вывода полей таким образом могут возникнуть неожиданности.

2
  • это, если не ошибаюсь, значение поля. а имя поля?
    – user211576
    28 мая 2016 в 8:46
  • Значение, да. Не уверен, что можно получить имена полей Но, честно говоря, затрудняюсь представить сценарий, в котором потребовались бы именно имена.
    – Yaant
    28 мая 2016 в 17:54

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.