1
<table st-table="LIST_ITEMS" st-filtered-collection="filteredCollection" class="table table-striped ng-isolate-scope">
        <thead>
            <tr>
                <th>Название</th>
                <th>Тип</th>
                <th>Індексация в БД </th>
                <th>Статус</th>
                <th>Страна</th>
                <th>Исходные данные</th>
                <th>Публикация Университета</th>
                <th>Автор сотрудник</th>
                <th>Соавторы студенти</th>
                <th>Публикация студента</th>
                <th>Соавторы других ВУЗов</th>
                <th>Соавторы заграничных ВУЗов</th>
            </tr>
        </thead>
        <tbody>
            <!-- ngRepeat: item in rests --><tr ng-repeat="item in rests" class="ng-scope">
                <td ng-bind="item.job_title" class="ng-binding">Тестовая робота</td>
                <td ng-bind="item.types" class="ng-binding">учебник</td>
                <td ng-bind="item.indexing" class="ng-binding">да</td>
                <td ng-bind="item.status" class="ng-binding">национальный</td>
                <td ng-bind="item.country" class="ng-binding">Украина</td>
                <td ng-bind="item.output_data" class="ng-binding">тестовые</td>
                <td ng-bind="item.published_sumdu" class="ng-binding">да</td>
                <td>
                    <span ng-bind="item.staff[$index].fio" class="ng-binding">PIB1</span>
                    <br>
                     <span ng-bind="item.staff[$index+1].fio" class="ng-binding">PIB2</span>
                </td>
                <td><span ng-bind="item.student[$index].fio" class="ng-binding">PIB1</span>
                    <br>
                     <span ng-bind="item.student[$index+1].fio" class="ng-binding">PIB2</span></td>
                <td ng-bind="item.student_publication" class="ng-binding">да</td>
                <td><span ng-bind="item.oi[$index].fio" class="ng-binding">PIB1</span>
                    <br>
                     <span ng-bind="item.oi[$index+1].fio" class="ng-binding">PIB2</span></td>
                <td><span ng-bind="item.fi[$index].fio" class="ng-binding">PIB1</span>
                    <br>
                     <span ng-bind="item.fi[$index+1].fio" class="ng-binding">PIB2</span></td>
            </tr><!-- end ngRepeat: item in rests -->
        </tbody>
        <tfoot>
            <tr>
                <td colspan="5" class="text-center">
                    <div st-pagination="" st-items-by-page="itemsByPage" st-displayed-pages="10" class="ng-isolate-scope"><!-- ngIf: numPages && pages.length >= 2 --></div>
                </td>
            </tr>
        </tfoot>
    </table>

Это собственно сам интерфейс, в нем пытался выводить через ещё один вложенный ng-repeat,но потом ещё раз глянул в документацию и понял, что его нельзя использовать как цикл для вложенных объектов, то есть так:

<tbody>
        <tr ng-repeat="item in rests">
            <td ng-bind="item.job_title"></td>
            <td ng-bind="item.types">></td>
            <td ng-bind="item.indexing">></td>
            <td ng-bind="item.status">></td>
            <td ng-bind="item.country">></td>
            <td ng-bind="item.output_data">></td>
            <td ng-bind="item.published_univercity">></td>
           <td ng-repeat="item.staff in rests.item  track by item.staff.id">
                <span ng-bind="item.staff[$index].fio"></span>
            </td>
            <td ng-bind="item.student[$index].fio"></td>
            <td ng-bind="item.student_publication"></td>
            <td ng-bind="item.oi[$index].fio"></td>
            <td ng-bind="item.fi[$index].fio"></td>
        </tr>
    </tbody> 

Как можно на месте перебрать и вывести циклом только по 1 свойству объектов или может как-то при получении данных в контроллере это надо делать?

Объясню модель данных: есть сущность "публикация", у неё свои атрибуты, есть сущности "студент","сотрудник","соавтор другого вуза", "соавтор зарубежного вуза". Все они связанные с "публикацией" по связи множество-к-множеству. Я при выводе всех атрибутов публикации, хочу в 1 ячейку таблицы, по связи вывести все ФИО связанных с ней объектов, которые я получил по rest api, а их много может бытьу одной публикации, то есть: в программе цикл будет для каждого объекта, что сейчас с индексом в интерфейсе(сейчас вывод только по 1му свойству) при выводе всех ФИО(это вложенные/связанные с основным объектом): ng-bind="item.staff[$index].fio",ng-bind="item.student[$inde‌​x].fio"Б ng-bind="item.oi[$index].fio", ng-bind="item.fi[$index].fio".

Пример полученных данных в json:

[
    {"id":1,"job_title":"Тестовая робота","types":"учебник","indexing":"да","status":"национальный","country":"Украина","output_data":"тестовая","published_univercity":"да","student_publication":"да",
    "oi":
    [
        {"id":1,"fio":"oi_pib1","name_oi":"name_oi_1"},
        {"id":2,"fio":"oi_pib2","name_oi":"name_oi_2"}
    ],
    "staff":
    [
        {"id":1,"fio":"PIB1","faculty":"ELIT","department":"computer science"},
        {"id":2,"fio":"PIB2","faculty":"ELIT","department":"computer science"}
    ],
    "fi":
    [
        {"id":1,"fio":"PIB1","name_fi":"name_fi"},
        {"id":2,"fio":"PIB2","name_fi":"name_fi2"}
    ],
    "student":
    [
        {"id":1,"fio":"S_PIB1","faculty":"elit","department":"computer science","groups":"it-01"},
        {"id":2,"fio":"S_PIB2","faculty":"elit","department":"computer science","groups":"it-02"}
    ]},
]

Я просто пытался лишь на 1м вложенном объекте работать и довести до ума. Контроллер простой, вот кусок на получение данных от сервера:

'use strict';
var controllers = angular.module('controllers', []);

controllers.controller('RestController', ['$scope', 'RestService',
    function ($scope, RestService) {
        $scope.rests = [];
        RestService.get().then(function (data) {
            if (data.status == 200)
                $scope.rests = data.data;
        }, function (err) {
            console.log(err);
        });
    }
]);
1

2 ответа 2

0

Из вопроса, и из комментариев пытался понять что хочет автор вопроса, но так и не понял, почему нельзя использовать вложенные циклы внутри ячейки. html из вопроса выглядит также. В правильную сторону думаю:

angular.module('app', [])
  .controller('Page', function() {
    this.data = [{"id": 1, "job_title": "Тестовая робота", "types": "учебник", "indexing": "да", "status": "национальный", "country": "Украина", "output_data": "тестовая", "published_univercity": "да", "student_publication": "да", "oi": [{"id": 1, "fio": "oi_pib1", "name_oi": "name_oi_1"}, {"id": 2, "fio": "oi_pib2", "name_oi": "name_oi_2"} ], "staff": [{"id": 1, "fio": "PIB1", "faculty": "ELIT", "department": "computer science"}, {"id": 2, "fio": "PIB2", "faculty": "ELIT", "department": "computer science"} ], "fi": [{"id": 1, "fio": "PIB1", "name_fi": "name_fi"}, {"id": 2, "fio": "PIB2", "name_fi": "name_fi2"} ], "student": [{"id": 1, "fio": "S_PIB1", "faculty": "elit", "department": "computer science", "groups": "it-01"}, {"id": 2, "fio": "S_PIB2", "faculty": "elit", "department": "computer science", "groups": "it-02"}]}];
    
  });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app" ng-controller="Page as c">
<table border=1 st-table="LIST_ITEMS" st-filtered-collection="filteredCollection"
       class="table table-striped ng-isolate-scope">
    <thead>
    <tr>
        <th>Название</th>
        <th>Тип</th>
        <th>Індексация в БД</th>
        <th>Статус</th>
        <th>Страна</th>
        <th>Исходные данные</th>
        <th>Публикация Университета</th>
        <th>Автор сотрудник</th>
        <th>Соавторы студенти</th>
        <th>Публикация студента</th>
        <th>Соавторы других ВУЗов</th>
        <th>Соавторы заграничных ВУЗов</th>
    </tr>
    </thead>
    <tbody>
    <tr ng-repeat="item in c.data" class="ng-scope">
        <td ng-bind="item.job_title" class="ng-binding">Тестовая робота</td>
        <td ng-bind="item.types" class="ng-binding">учебник</td>
        <td ng-bind="item.indexing" class="ng-binding">да</td>
        <td ng-bind="item.status" class="ng-binding">национальный</td>
        <td ng-bind="item.country" class="ng-binding">Украина</td>
        <td ng-bind="item.output_data" class="ng-binding">тестовые</td>
        <td ng-bind="item.published_sumdu" class="ng-binding">да</td>
        <td>
            <div ng-repeat="sf in item.staff" ng-bind="sf.fio"></div>
        </td>
        <td>
            <div ng-repeat="st in item.student" ng-bind="st.fio"></div>
        </td>
        <td ng-bind="item.student_publication" class="ng-binding">да</td>
        <td>
            <div ng-repeat="o in item.oi" ng-bind="o.fio"></div>
        </td>
        <td>
            <div ng-repeat="f in item.fi" ng-bind="f.fio"></div>
        </td>
    </tr>
    </tbody>
   
</table>
</div>

1
  • Спасибо большое. Теперь понял каким образом проводятся манипуляции внутри ng-repeat. 15 мар 2017 в 13:48
0

Вложенные циклы вполне себе работают:

angular.module('app', [])
  .controller('Page', function() {
    this.data = [{"id": 1, "job_title": "Тестовая робота", "types": "учебник", "indexing": "да", "status": "национальный", "country": "Украина", "output_data": "тестовая", "published_univercity": "да", "student_publication": "да", "oi": [{"id": 1, "fio": "oi_pib1", "name_oi": "name_oi_1"}, {"id": 2, "fio": "oi_pib2", "name_oi": "name_oi_2"} ], "staff": [{"id": 1, "fio": "PIB1", "faculty": "ELIT", "department": "computer science"}, {"id": 2, "fio": "PIB2", "faculty": "ELIT", "department": "computer science"} ], "fi": [{"id": 1, "fio": "PIB1", "name_fi": "name_fi"}, {"id": 2, "fio": "PIB2", "name_fi": "name_fi2"} ], "student": [{"id": 1, "fio": "S_PIB1", "faculty": "elit", "department": "computer science", "groups": "it-01"}, {"id": 2, "fio": "S_PIB2", "faculty": "elit", "department": "computer science", "groups": "it-02"}]}];
    
  });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>


<div ng-app="app" ng-controller="Page as c">
  <table border=1>
  <tr><th>job_title<th>fio<th>name</tr>
  <tr ng-repeat="item in c.data">
    <td>{{item.job_title}}</td>
    <td>
      <div ng-repeat="subitem in item.oi">
      {{subitem.fio}},
      {{item.staff[$index].fio}}
      </div>
    </td>
    <td>
     <div ng-repeat="subitem in item.oi">
      {{subitem.name_oi}},
      {{item.fi[$index].name_fi}}
     </div>
    </td>
  </tr>
  </table
</div>

Однако, нужно быть очень осторожным при использовании подобных трюков:

  • Количество элементов в массивах должно совпадать(мы используем чужой индекс)
  • Также должна совпадать сортировка! Иначе элементы, относящиеся к разным id, попадут в одну ячейку.
  • $index относится к текущему(ближайшему) циклу ngRepeat, обращение к родительскому индексу осуществляется через родительский scope: $parent.$index. Зачастую неочевидно(а после изменения кода могут возникнуть ошибки), к какому именно циклу относится $parent.$parent.$parent.$index, ведь не только ngRepeat порождает scope. Таких конструкций нужно избегать.
6
  • Странно, у меня не работает такой вариант, только пустые блоки выводит. Но спасибо за подсказку, попробую в эту сторону двигаться тогда. 15 мар 2017 в 10:13
  • стоит предупредить об аккуратности при использовании вложенных циклов и спецпеременных вроде $index
    – Grundy
    15 мар 2017 в 10:14
  • @Grundy, я правильно понял о чём вы? (см. последнюю правку) Или не только об этом?
    – vp_arth
    15 мар 2017 в 10:20
  • @vp_arth, не только: $index относится непосредственно к ближайшему ng-repeat иногда это может быть не очевидно
    – Grundy
    15 мар 2017 в 10:21
  • ведь не только ngRepeat что? :-D
    – Grundy
    15 мар 2017 в 10:32

Ваш ответ

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

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