AngularJSのng-ifで文字列を使うなら !! を付けよう


‘0’ が表示されない…

ng-if あるいは、ng-showng-hideを使うときに、string 値の有無で表示判定を記述することもある。

1
<p ng-if="model.value">{{model.label}}</p>

そんなとき、model.valueの値が'0'だったらどうなるか。

なんと、表示されない…。

‘0’ だけじゃない

この現象、'0'だけでなく、'f' 'no' 'n'といった文字列(大文字・小文字問わず)の場合であっても表示されない。

angular.js のコードはこうなってる。

1
2
3
4
5
6
7
8
9
10
11
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;
}

boolean にしちゃっておこう

ということで、文字列の有無で判定させたいだけってときは!!を付けときましょう。boolean とか object の場合でも!!付ける方針にしとくのがラクでいいかな。

1
<p ng-if="!!model.value">{{model.label}}</p>