如何否定 AngularJS ng-if 指令的参数? [英] How do I negate the parameter for AngularJS ng-if directive?

问题描述

快速示例:

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

this.loggedIn = this.routeParams.loggedIn;

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

登录！
<div ng-if="!home.loggedIn">未登录...

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

当loggedIn 的值实际上为false 时，我希望!home.loggedIn 参数评估为true.

这里有什么建议吗?

解决方案

很明显，这个问题的根源在于 routeParams.loggedIn 是一个字符串.

所以解决方案很明显:

//改成:this.loggedIn = this.routeParams.loggedIn;//为此:this.loggedIn = this.routeParams.loggedIn === '真';

<小时>

但是为什么会出现奇怪的行为?
当 loggedIn 为false"时，为什么工作不显示任何内容?

好吧，原因如下:

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

function toBoolean(value) {if (typeof value === '函数') {值 = 真；} else if (value && value.length !== 0) {var v =小写("+值)；value = !(v == 'f' || v == '0' || v == 'false' || v == 'no' || v == 'n' || v == '[]');} 别的 {值 = 假；}返回值；}

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

那么，让我们检查 ngIf 的两种情况:

1. loggedIn === 'true'

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

   ngIf2 计算 !home.loggedIn <=> !'true' --> false (boolean)
   (发生这种情况是因为任何非空字符串碰巧评估为真)
   ngIf2 通过 toBoolean()
   传递这个值toBoolean(false) 返回 false
   ngIf2 不呈现其内容

2. loggedIn === 'false'

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

   ngIf2 计算 !home.loggedIn <=> !'false' --> false (boolean)
   (发生这种情况是因为任何非空字符串碰巧评估为真)
   ngIf2 通过 toBoolean()
   传递这个值toBoolean(false) 返回 false
   ngIf2 不呈现其内容

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

Quick Example:

There is a routed parameter (/Home/:isLoggedIn) that equates to true or false. (/Demo/#/Home/false) and a controller property

this.loggedIn = this.routeParams.loggedIn;

I have a view (Home.html) that has two elements, each with an ng-if attribute.

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

If I navigate to /Demo/#/Home/true then the first element displays and the second does not. If I navigate to /Demo/#/Home/false then the first element does not display NOR does the second one.

I would expect the !home.loggedIn parameter evaluate to true when the value of loggedIn is, in fact, false.

Any advice here?

解决方案

It is quite obvious that he problem has its root to the fact that routeParams.loggedIn is a string.

So the solution is quite obvious:

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

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

---

But why the weird behaviour ?
Why work not showing anything when loggedIn is 'false' ?

Well, here is why:

The ngIf directive uses the following toBoolean() function to convert its value to boolean:

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

If a string is passed to toBoolean() it converts it to lowercase and checks (among other things) if it equals 'false' (in which case it returns false). This is different than the default JavaScript implementation which interprets any non-empty string as true when casting to boolean.

So, let's examine the two cases for both ngIfs:

1. loggedIn === 'true'

   ngIf1 evaluates home.loggedIn --> 'true' (string)
   ngIf1 passes this value through toBoolean()
toBoolean('true') returns true (because it sees a string that can't match with any string considered falsy)
   ngIf1 renders its content

   ngIf2 evaluates !home.loggedIn <=> !'true' --> false (boolean)
   (this happens because any non-empty string happens to evaluate to true)
   ngIf2 passes this value through toBoolean()
toBoolean(false) returns false
   ngIf2 does not render its content

2. loggedIn === 'false'

   ngIf1 evaluates home.loggedIn --> 'false' (string)
   ngIf1 passes this value through toBoolean()
toBoolean('false') returns false (because it sees a string that is considered falsy
   ngIf1 does not render its content

   ngIf2 evaluates !home.loggedIn <=> !'false' --> false (boolean)
   (this happens because any non-empty string happens to evaluate to true)
   ngIf2 passes this value through toBoolean()
toBoolean(false) returns false
   ngIf2 does not render its content

So, this explains the "weird" behaviour (hopefully in an understandable way).

这篇关于如何否定 AngularJS ng-if 指令的参数?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！