Why am I getting different results from ng-show="!emptyArray" and ng-hide="emptyArray"?

Question

I have always thought ngShow and ngHide act as boolean counterpart to each other. That belief, however, is shaken by the unexpected behaviour of ngShow when an empty array is involved.

Here is a demo plunker. Why isn't ng-show="!emptyArray" behaving like ng-hide="emptyArray"?

Answer 1

Because [] !== false. You can coerce the length value to boolean instead with !!.

<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> 

Edited:

AngularJS's directive hide or show depends on the function toBoolean() for evaluating the value passed in. Here is the source code of 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; } 

And you can verify the following code in JS console:

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

That explains why. Since when emptyArray is passed to the toBoolean() directly, it evaluates the correct result false. However when !emptyArray is passed to toBoolean(), it doesn't evaluate to true since !emptyArray is false itself.

Hope it helps.

Answer 2

ng-if and ng-show mistreats "[]" (empty array)

See: this link

[] == true false   [] != true  true  (![]) == true false  [''] == true false  (!['']) == true false  "" == true false  "[]" == true false  (!"[]") == true false 

Sounds its by design.