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

问题描述

简单的例子：

有一个路由参数（/首页/：isLoggedIn）这相当于真或假。 （/演示/＃/首页/假）和控制器属性。

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

我有一个观点（Home.html中）有两个元素，每个都有一个NG-如果属性。

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>

如果我浏览到/演示/＃/首页/真，那么第一个元素显示，第二没有。
如果我浏览到/演示/＃/首页/ false，那么第一个元素没有显示，也没有第二个。

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.

我期望！home.loggedIn参数计算结果为true时的loggedIn的价值，事实上，假的。

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

在这里有什么建议？

推荐答案

这是很明显的，他问题有其根源的事实， routeParams.loggedIn 是一个字符串。

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

---

但是，为什么怪异的行为？结果
为什么工作未显示任何时候的loggedIn 是'假'？

好了，这是为什么：

的 ngIf 指令使用以下 toBoolean（）函数将其值转换为布尔值：

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

如果一个字符串传递给 toBoolean（）将其转换为小写字母和检查（除其他事项外），如果它等于假（在这种情况下，它会返回假）。这比默认的JavaScript实现跨$ P $点任何一个非空字符串作为真正铸造时为布尔哪些不同。

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.

那么，让我们来看看这两种情况对于 ngIf 取值：

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

1. 的loggedIn ===真正的

ngIf1的计算结果 home.loggedIn - >'真'（字符串）结果
ngIf1通过 toBoolean（）这个值结果
toBoolean（'真正'）收益真正（因为它看到一个字符串，不能与任何字符串视为falsy匹配）结果
ngIf1呈现其内容

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的计算结果 home.loggedIn ＆LT;！=> 真正的 - >假（布尔）结果
    （这是因为任何一个非空字符串恰好评估为true）结果
ngIf2通过 toBoolean（）这个值结果
toBoolean（假）返回假结果
ngIf2不会呈现其内容

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

的loggedIn ==='假'

ngIf1的计算结果 home.loggedIn - >'假'（字符串）结果
ngIf1通过 toBoolean（）这个值结果
toBoolean（'假'）收益假（因为它看到被认为是falsy结果字符串
ngIf1不会呈现其内容

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的计算结果 home.loggedIn ＆LT;！=> '假' - >假（布尔）结果
    （这是因为任何一个非空字符串恰好评估为true）结果
ngIf2通过 toBoolean（）这个值结果
toBoolean（假）返回假结果
ngIf2不会呈现其内容

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