Подтвердить что ты не робот

NgHide или ngShow, основанный на количестве детей

Я знаю, что это абсолютно глупо, чтобы спросить, но мне любопытно есть ли способ сделать что-то вроде:

<div ng-show='this.children.length > 0'> // shown
   <div>

   </div>
</div>
4b9b3361

Ответ 1

Чтобы добавить к ответу @Josh David Miller, следующие значения считаются ложными в angular.

1) Пустой массив

2) Пустая строка//Даже пространство считается истинным

3) Логическое значение с ложным

4) undefined

5) нулевым

6) 0

Итак, ответ Дэвида может быть записан как

<div ng-show="items.length">
  <div ng-repeat="item in items">
    <!-- ... -->
  </div>
</div>

или даже короче,

<div ng-show="items">
  <div ng-repeat="item in items">
    <!-- ... -->
  </div>
</div>

Ответ 2

AngularJS сделал нарушение изменений в версии 1.3.0!

К сожалению, ответ rajkamals больше не правильный.

В этой версии только эти 6 значений считаются ложными:

  • false
  • null
  • undefined
  • NaN
  • 0
  • ""

Значения 'f', '0', 'false', 'no', 'n' и [] (!) стали правдивыми.

Таким образом, используя

<div ng-show="items">
    <!-- ... --->
</div>

больше не рекомендуется, если div должен быть только видимым, если items содержит не менее 1 элемент, потому что даже с items = [] он будет отображаться.

Ответ 3

В AngularJS мы не должны думать с точки зрения нашего взгляда, а с точки зрения нашей модели.

Итак, вы должны спросить себя, что генерирует контент внутри вашего элемента. Если он динамичен, он исходит из вашей модели. Итак, какое свойство модели вы можете получить, чтобы предоставить вам необходимую информацию?

Здесь пример ngRepeat:

<div ng-show="items.length > 0">
  <div ng-repeat="item in items">
    <!-- ... -->
  </div>
</div>

Ответ 4

Увидев большинство ваших вопросов, кажется, что вы не используете Angular "правильный" способ или, возможно, не можете (из-за ограничений проекта, возможно!).

Некоторые общие вещи для рассмотрения.

  • Если вы используете компиляцию $- это запах кода. Вам не нужно использовать $compile в 95% случаев. Если вы используете компиляцию $, вы знаете об этом, и вы не можете найти другого способа сделать то, что вам нужно сделать. Вы используете его с большой осторожностью.

  • Если вы "запрашиваете" DOM, чтобы что-либо сделать - снова это возможный запах. Опять же в 95% случаев вам не понадобится это делать. Правильный путь здесь - изменить модель и позволить Angular обрабатывать DOM.

Они должны использоваться так же, как если бы вы использовали setTimeout 0, например. Всякий раз, когда вы его используете, он должен чувствовать себя как хак.

Если вы не полностью или частично контролируете свой HTML (возможно, сервер?), он может стать беспорядочным с Angular. Возможно, именно поэтому вы пытаетесь сделать все эти манипуляции с DOM.

<div ng-show='this.children.length > 0'> // shown
   <div>

   </div>
</div>

Это один из примеров, когда мы не уверены, кто находится под контролем. Если у вас есть доступ к конструкции, которая генерирует этот html, вы также можете записать его с помощью ng-init!

<div ng-init="childElements = {{serverside variable}}" ng-show='childElements > 0'> // shown
   <div server-side-repeat>

   </div>
</div>

Если вы вынуждены делать это в довольно многих местах, возможно, Angular не подходит для вас?

Ответ 5

AngularJS v1.3.3 = > ng-show="items" не работал у меня, поскольку он оценивает объект true, false, null, undefined. в случае items=[] ng-show все еще оценивается как true. Вместо этого мне пришлось использовать:

<div ng-show="items.length">
    <!-- ... --->
</div>

И работает! Спасибо за направление.

Ответ 6

Это также отлично работает.

<div ng-show="items.length">
<div ng-repeat="item in items">
<!-- bind to your Dom element -->
</div>
</div>

Ответ 7

Как отметил Кристофер, принятый ответ уже не правильный. Поскольку пустой массив по-прежнему оценивается как правдивый.

obj.children = []
<div ng-show='obj.children'> 
  As of Angular 1.3 this always shows if children exists as part of obj. 
</div>

Текущее решение

В этом случае массив существует. Но если вы дадите angular нулевой элемент массива массива для оценки, и нет такого элемента, он будет оцениваться как false.

<div ng-show='obj.children[0]'> 
  This will not show because there is no element in the array at 0
</div>

Вы также можете использовать это с [n], как любой пронумерованный элемент в массиве, чтобы показывать только тогда, когда счетчик больше n. Если вы используете obj.children [2], он будет показывать только, есть ли у вас 3 или более элемента в массиве.