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

时间:2013-09-26 18:02:21

标签: angularjs angularjs-directive

我一直认为ngShowngHide充当彼此的布尔对应物。然而,当涉及空数组时,ngShow的意外行为会使这种信念动摇。

这是demo plunker。为什么ng-show="!emptyArray"的行为不像ng-hide="emptyArray"

3 个答案:

答案 0 :(得分: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的指令hideshow取决于函数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本身为!emptyArray,因此不会评估为false

希望它有所帮助。

答案 1 :(得分:5)

ng-if和ng-show mareatreats“[]”(空数组)

请参阅:此link

[] == true
false

 [] != true
 true

(![]) == true
false

[''] == true
false

(!['']) == true
false

"" == true
false

"[]" == true
false

(!"[]") == true
false

听起来很符合设计。

答案 2 :(得分:0)

我使用这样的东西,它适用于我

ng-hide="array.length == 0"