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会执行第二个元素。

当recordIn的值实际上为false时，我希望！home.loggedIn参数的值为true。

这里有什么建议吗？

Answer 1

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

所以解决方案非常明显：

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

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

但为什么这种奇怪的行为呢？为什么loggedIn为'false'时工作没有显示任何内容？

嗯，原因如下：

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。

那么，让我们检查两个ngIf的案例：

loggedIn === 'true'

ngIf1评估home.loggedIn - ＆gt; 'true'（字符串）
ngIf1将此值传递给toBoolean()
toBoolean('true')返回 true （因为它看到的字符串与任何被视为falsy的字符串不匹配）
ngIf1呈现其内容

ngIf2评估!home.loggedIn＆lt; =＆gt; !'true' - ＆gt; false（布尔值）
（这是因为任何非空字符串恰好评估为真） ngIf2将此值传递给toBoolean()
toBoolean(false)返回 false
ngIf2不呈现其内容
loggedIn === 'false'

ngIf1评估home.loggedIn - ＆gt; 'false'（字符串）
ngIf1将此值传递给toBoolean()
toBoolean('false')会返回 false （因为它会看到一个被视为错误字符串的字符串 ngIf1不呈现其内容

ngIf2评估!home.loggedIn＆lt; =＆gt; !'false' - ＆gt; false（布尔值）
（这是因为任何非空字符串恰好评估为真） ngIf2将此值传递给toBoolean()
toBoolean(false)返回 false
ngIf2不呈现其内容

所以，这解释了“奇怪”的行为（希望以一种可以理解的方式）。

Answer 2

问题可能是home.loggedIn是一个字符串，当传递给ng时 - 如果它可能正在评估并执行从字符串到bool的转换以获取值＆＃34; false＆＃34;变成虚假的。如果你有值，那么在值传递之前的表达式评估中！＆＃34; false＆＃34;这实际上是假的，因为任何字符串都是真的，否定它就变成了假。

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

2 个答案: