为什么我从ng-show ="!emptyArray"和ng-hide ="emptyArray"获得不同的结果？

Question

我一直认为ngShow并ngHide充当彼此的布尔对应物.然而,这种信念ngShow被涉及空数组时的意外行为所动摇.

这是一个演示插件.为什么不ng-show="!emptyArray"表现得像ng-hide="emptyArray"？

Answer 1

因为[] !== false.您可以将长度值来要挟boolean,而不是用!!.

<div ng-hide="!!emptyArray.length">emptyArray is falsy, so do not hide this.</div>
<div ng-show="!!!emptyArray.length">!emptyArray is truthy, so show this.</div>

编辑:

AngularJS的指令hide或show依赖于toBoolean()评估传入值的函数.这是toBoolean()的源代码:

function toBoolean(value) {
  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;
}

您可以在JS控制台中验证以下代码:

>var emptyArray = [];
>toBoolean(emptyArray)
false
>toBoolean(!emptyArray)
false

这解释了原因.由于何时直接emptyArray传递给toBoolean()它,它会评估正确的结果false.然而,当!emptyArray被传递到toBoolean(),它不评估,以true自!emptyArrayIS false本身.

希望能帮助到你.

Answer 2

ng-if和ng-show misreats"[]"(空数组)

请参阅:此链接

[] == true
false

 [] != true
 true

(![]) == true
false

[''] == true
false

(!['']) == true
false

"" == true
false

"[]" == true
false

(!"[]") == true
false

听起来很有设计感.