AngularJS: нестандартное поведение ng-if

в 12:35, , рубрики: AngularJS

AngularJS: нестандартное поведение ng if
В проекте используется angularjs, проект уже достаточно большой, используем очень много кастомных директив, но сегодня столкнулся с проблемой поведения ng-if .

Для меня было ожидаемо, что условие работает так же как и в js, то есть:

if (condition) {
 ...
} else {
 ....
}

В зависимости, что передано — элемент будет скрыт или показан.

В моем случае проверялось наличие поля в объекте ng-if="column.is_available". Тип поля — строка, но может быть нескольких вариантов:

  • Yes
  • No
  • After %N% days
  • и так далее

Все было хорошо, до тех пор, пока не проверил состояние No. Оказывается, angularjs использует функцию toBoolean, при проверки условия, которая имеет достаточно не обычное (по крайней мере для меня) поведение:

function toBoolean(value) {
  if (typeof value === 'function') {
    value = true;
  } else if (value && value.length !== 0) {
    var v = lowercase("" + value);
    value = !(v == 'f' || v == '0' || v == 'false' || v == 'no' || v == 'n' || v == '[]');
  } else {
    value = false;
  }
  return value;
}

То есть вернёт false при строках:

  • f
  • 0
  • no
  • n
  • []

В официальной документации об этом ничего не сказано. Может в каких либо случаях это круто и удобно, но в моем нет. Как минимум для таких проверок нужно использовать дополнительную директиву, ng-extra-if="condition", а для обычной ng-if — обычный if, такой же как в js.

Решил проблему так:

<div ng-if="isAvailable(row.is_available)">
$scope.isAvailable = function(is_available){
    return !!is_available;
} 

Но можно еще и так:

<div ng-if="!!row.is_available">

Это распространяется еще и на ng-hide и ng-show.

Автор: tuchk4

Источник

Поделиться

* - обязательные к заполнению поля