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

标签 angularjs angularjs-directive

我一直以为ngShowngHide互相充当 bool(boolean) 对象。但是,当涉及到空数组时,ngShow的意外行为会撼动这一信念。

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

最佳答案

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

希望能帮助到你。

关于angularjs - 为什么我从ng-show =“!emptyArray”和ng-hide =“emptyArray”得到不同的结果?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19035406/

相关文章:

javascript - 我应该如何用 Angular 发布多个表行

angularjs - 如何在 Angular UI 引导对话框中使用模板?

AngularJS 指令测试失败 - 为什么 "element"有错误的值?

javascript - 与自定义指令范围的 2 种方式数据绑定(bind)

javascript - 将对象从 Angularjs 传递到 MVC Controller 并映射到类对象

angularjs - ng-repeat 在 div 上不起作用

javascript - 使用 Angular js 从日期时间中提取时间

javascript - 模块 'ng' 没有导出成员 'ui' 当使用 ui-router type definition for typescript

angularjs - 如何扩展引导​​ ui Controller

AngularJS - 我可以根据三元运算符使用数据绑定(bind)值吗