如何否定AngularJS ng-if指令的参数？

Question

快速示例:

有一个路由参数(/ Home /:isLoggedIn)等于true或false.(/ Demo /#/ Home/false)和控制器属性

this.loggedIn = this.routeParams.loggedIn;

我有一个视图(Home.html)有两个元素,每个元素都有一个ng-if属性.

<div ng-if="home.loggedIn">
    Logged In!
</div>
<div ng-if="!home.loggedIn">
    Not Logged In...
</div>

如果我导航到/ Demo /#/ Home/true,则第一个元素显示,第二个元素不显示.如果我导航到/ Demo /#/ Home/false,则第一个元素不显示NOR执行第二个元素.

当loggedIn的值实际上为false时,我希望!home.loggedIn参数计算为true.

有什么建议吗？

Answer 1

很明显,他的问题源于routeParams.loggedIn一个字符串.

所以解决方案很明显:

// Change that:
this.loggedIn = this.routeParams.loggedIn;

// To this:
this.loggedIn = this.routeParams.loggedIn === 'true';

但为什么奇怪的行为呢？
为什么工作没有显示任何loggedIn"假"？

那么,原因如下:

该ngIf指令使用以下toBoolean()函数将其值转换为布尔值:

function toBoolean(value) {
  if (typeof value === 'function') {
    value = true;
  } else 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;
}

如果传递一个字符串,toBoolean()则将其转换为小写并检查(除其他外)是否等于'false'(在这种情况下它返回false).这与默认的JavaScript实现不同,后者true在转换为boolean时解释任何非空字符串.

那么,让我们检查两个案例的两个案例ngIf:

1. loggedIn === 'true'

   ngIf1计算home.loggedIn- >'true'(字符串)
   ngIf1通过toBoolean()
toBoolean('true')返回true传递此值(因为它看到的字符串与任何被视为falsy的字符串不匹配)
   ngIf1呈现其内容

   ngIf2计算!home.loggedIn<=> !'true'- > false(布尔值)
   (这是因为任何非空字符串恰好评估为true)
   ngIf2通过toBoolean()
toBoolean(false)返回false传递此值
   ngIf2不呈现其内容

2. loggedIn === 'false'

   ngIf1计算home.loggedIn- >'false'(字符串)
   ngIf1通过toBoolean()
toBoolean('false')返回false传递此值(因为它看到一个被视为麻痹的字符串
   ngIf1不呈现其内容

   ngIf2计算!home.loggedIn<=> !'false'- > false(布尔值)
   (这是因为任何非空字符串恰好评估为true)
   ngIf2通过toBoolean()
toBoolean(false)返回false传递此值
   ngIf2不呈现其内容

所以,这解释了"怪异"的行为(希望以一种可以理解的方式).