1

Есть много контейнеров с списками, которые динамически подгружаются с массива что я получаю с джейсона. Данных может быть много и самого разного, поэтому пробую сделать проверку чтобы не было пустых контейнеров. Сразу же думал использовать ng-if, это казалось более всего подходящим, но вот в чем возникла загвоздка.

<div>
  <h1>Birds</h1>
  <ul>
    <li ng-if="bird.type === 'bird'"
        ng-repeat="bird in creatures">{{bird.name}}</li>
  </ul>
</div>

В массиве много обьектов и нужно их проверять по очереди, поэтому сначала нужно пускать ng-repeat, но в данном случае я его не могу повесить на родительский div т.к. будет повторяться заголовок в каждом обьекте. Я его цепляю на li, но в таком случае я уже на родительском элементе не ng-if="bird.type === 'bird'", тк он еще на тот момент не задан. И выходит проблема в том что если нет списка, то на странице будет только заголовок.. Если бы можно было проверить что список пуст - и скрыть родительский элемент, есть ли такая возможность? пример Plunk

2
  • если элементов нет значит creatures.length будет == 0. вот вам и условие для блока отсутствия элеементов 5 авг 2016 в 16:38
  • @Василий Барбашев к сожалению это не так. creatures всегда имеет уйму обьектов, и как в данном примере что на планкр - могут быть и собаки и коты и птицы, но вот рыбы, которую мы ожидаем, может и не быть. но чтобы добраться до рыбы - нужно сделать ng-repeat, тк мы не знаем кого именно из существ у нас может не быть
    – YoroDiallo
    5 авг 2016 в 16:42

1 ответ 1

1

В данном случае нужна фильтрация массива. Она может быть осуществлена непосредственно во view, либо внутри контроллера.

Например:

var app = angular.module('App', []);

app.controller('Ctrl', function($scope) {
  $scope.creatures = [{
      name: 'Cho-cho',
      type: 'bird'
    }, {
      name: 'Floo-floo',
      type: 'dog'
    }, {
      name: 'Pou-pou',
      type: 'bird'
    }, {
      name: 'Oop-flup',
      type: 'bird'
    }, {
      name: 'Chio-mio',
      type: 'cat'
    }, {
      name: 'Floo-floo',
      type: 'dog'
    }, {
      name: 'Loo-Li',
      type: 'dog'
    }, {
      name: 'Pops-Mops',
      type: 'bird'
    }, {
      name: 'Boo-Moo',
      type: 'dog'
    }, {
      name: 'Iop-Pio',
      type: 'dog'
    }, {
      name: 'Floop-cho',
      type: 'bird'
    }, {
      name: 'Bop-Bou',
      type: 'cat'
    }

  ]
});
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.js"></script>
<div ng-app="App" ng-controller="Ctrl" ng-init="birds=(creatures|filter:{type:'bird'});
              dogs=(creatures|filter:{type:'dog'});
              cats=(creatures|filter:{type:'cat'});
              fishes=(creatures|filter:{type:'fish'})">
  <div ng-if="birds.length>0">
    <h1>Birds</h1>
    <ul>
      <li ng-repeat="bird in birds">{{bird.name}}</li>
    </ul>
  </div>
  <div ng-if="dogs.length>0">
    <h1>Dogs</h1>
    <ul>
      <li ng-repeat="dog in dogs">{{dog.name}}</li>
    </ul>
  </div>
  <div ng-if="cats.length>0">
    <h1>Cats</h1>
    <ul>
      <li ng-repeat="cat in cats">{{cat.name}}</li>
    </ul>
  </div>
  <div ng-if="fishes.length>0">
    <h1>Fishes</h1>
    <ul>
      <li ng-repeat="fish in fishes">{{fish.name}}</li>
    </ul>
  </div>

</div>

4
  • спасибо) это я этот вопрос на stackoverflow.com задал) если честно то в мелких маштабах их ответы помогают, но вот когда нужно искать тип в some.rest[0].ino.topi[1].type, это выходит проблематичнее)
    – YoroDiallo
    5 авг 2016 в 18:31
  • @YoroDiallo, не совсем понял начало комментария. Конец не понял совсем :-) единственное решение задачи: предварительно обработать исходный набор данных. Где и каким образом обрабатывать значения не имеет.
    – Grundy
    5 авг 2016 в 18:35
  • я в смысле что этот вопрос stackoverflow.com/questions/38794479/… я задал, поэтому этот коммент уже видел)) но все равно спасибо)
    – YoroDiallo
    5 авг 2016 в 18:39
  • @YoroDiallo, но я этот вопрос не видел :)
    – Grundy
    5 авг 2016 в 18:39

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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