21

我一直认为ngShow并ngHide充当彼此的布尔对应物。ngShow但是，当涉及空数组时，这种意外行为会动摇这种信念。

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

4

3 回答 3

50

因为[] !== 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

这就解释了为什么。由于 when直接emptyArray传递给toBoolean()，它评估正确的结果false。但是，当!emptyArray传递给时toBoolean()，它不会评估为，true因为!emptyArray它false本身。

希望能帮助到你。

于 2013-09-26T18:06:08.653 回答
5

ng-if 和 ng-show 虐待“[]”（空数组）

见：这个链接

[] == true
false

 [] != true
 true

(![]) == true
false

[''] == true
false

(!['']) == true
false

"" == true
false

"[]" == true
false

(!"[]") == true
false

听起来是设计使然。

于 2013-09-26T18:11:19.090 回答
0

I use something like this , it works to me

ng-hide="array.length == 0"
于 2017-03-09T20:51:03.190 回答