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

AngularJS - ng - если пустая строка строки проверки

это простой пример:

<a ng-if="item.photo == ''" href="#/details/{{item.id}}"><img src="/img.jpg" class="img-responsive"></a>
<a ng-if="item.photo != ''" href="#/details/{{item.id}}"><img ng-src="/{{item.photo}}" class="img-responsive"></a>

Я вижу, что он всегда генерирует условие item.photo != '', даже если значение пусто. Почему?

4b9b3361

Ответ 1

Вам не нужно явно использовать классификаторы, такие как item.photo == '' или item.photo != ''. Как и в JavaScript, пустая строка будет оценена как ложная.

Ваши взгляды будут намного чище и читабельнее.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script>
<div ng-app init="item = {photo: ''}">
   <div ng-if="item.photo"> show if photo is not empty</div>
   <div ng-if="!item.photo"> show if photo is empty</div>
  
   <input type=text ng-model="item.photo" placeholder="photo" />
</div

Ответ 2

Вероятно, ваш item.photo равен undefined, если у вас нет атрибута фотографии для элемента в первую очередь и, следовательно, undefined != ''. Но если вы поместите код, чтобы показать, как вы предоставляете значения item, это поможет.

PS: Извините, что опубликует это как ответ (я скорее считаю это скорее комментарием), но пока у меня недостаточно репутации.

Ответ 3

Если по "пустой" вы имеете в виду undefined, это способ интерпретации ng-выражений. Затем вы можете использовать:

<a ng-if="!item.photo" href="#/details/{{item.id}}"><img src="/img.jpg" class="img-responsive"></a>

Ответ 4

Это то, что может происходить, если значение item.photo не определено, тогда item.photo != '' Всегда будет отображаться как true. И если вы думаете логически, это действительно имеет смысл, item.photo не является пустой строкой (так что это условие выполняется), так как оно не undefined.

Теперь для людей, которые пытаются проверить, является ли значение ввода пустым или нет в Angular 6, можно использовать этот подход.

Допустим, это поле ввода -

<input type="number" id="myTextBox" name="myTextBox"
 [(ngModel)]="response.myTextBox"
            #myTextBox="ngModel">