3

Есть массив типа =

[
{"name":"Name","dep":"Dep1"},
{"name":"Name","dep":"Dep1"},
{"name":"Name","dep":"Dep1"},
{"name":"Name","dep":"Dep2"},
{"name":"Name","dep":"Dep3"},
]

Вопрос вот в чем. Как его правильно вывести с помощью ng-repeat или чего другого если нужно каждый новый отдел в списке отделять разделителем?

Примерно так:

<div class="delimiter">Dep1</div>
<div>Name</div>
<div>Name</div>
<div>Name</div>
<div class="delimiter">Dep2</div>
<div>Name</div>
<div>Name</div>
4
  • Напишите итоговый HTML, который хотите получить. По словесному описанию непонятно.
    – Fenex
    Commented 29 сент. 2015 в 14:13
  • <div class="delimiter">Dep1</div> <div>Name</div> <div>Name</div> <div>Name</div> <div class="delimiter">Dep2</div> <div>Name</div> <div>Name</div> Commented 29 сент. 2015 в 14:32
  • @Fenex, понятно всё.
    – Qwertiy
    Commented 29 сент. 2015 в 14:32
  • @ВарфаламейИзольдин, а Dep3 почему нет?
    – Qwertiy
    Commented 29 сент. 2015 в 14:35

1 ответ 1

3

function Controller($scope) {
  $scope.data = [
    {"name":"Name","dep":"Dep1"},
    {"name":"Name","dep":"Dep1"},
    {"name":"Name","dep":"Dep1"},
    {"name":"Name","dep":"Dep2"},
    {"name":"Name","dep":"Dep3"}
  ];
}
.is-other {
  border-top: 1px solid;
}

.is-other:first-child {
  border-top: none;
}
<script src=//ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.min.js></script>

<ul ng-app ng-controller=Controller>
  <li ng-repeat="item in data" ng-class="{'is-other': item.dep!==data[$index-1].dep}">{{item.dep}} -> {{item.name}}</li>
</ul>

function Controller($scope) {
  $scope.data = [
    {"name":"Name","dep":"Dep1"},
    {"name":"Name","dep":"Dep1"},
    {"name":"Name","dep":"Dep1"},
    {"name":"Name","dep":"Dep2"},
    {"name":"Name","dep":"Dep3"}
  ];
}
.dep {
  background: silver;
}
<script src=//ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.min.js></script>

<div ng-app ng-controller=Controller>
  <div ng-repeat="item in data">
    <div ng-if="item.dep!==data[$index-1].dep" class=dep>{{item.dep}}</div>
    <div>{{item.name}}</div>
  </div>
</div>

12
  • Над первым ничего нет. И над разделителем название Dep хотелось бы. Commented 29 сент. 2015 в 14:35
  • @ВарфаламейИзольдин, над первым я специально убрал. Зачем ему одинокая разделительная линия? Название без проблем присобачивается css'ом.
    – Qwertiy
    Commented 29 сент. 2015 в 14:36
  • @ВарфаламейИзольдин, добавил ещё вариант. Но вообще-то надо бы структуру объекта менять, чтобы нормально сделать.
    – Qwertiy
    Commented 29 сент. 2015 в 14:39
  • А как поменять? Commented 29 сент. 2015 в 15:09
  • @ВарфаламейИзольдин, что именно поменять? о_О
    – Qwertiy
    Commented 29 сент. 2015 в 17:12

Ваш ответ

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

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