javascript - Angular JS : ng-switch on boolean not working

Question

我正在尝试根据存储在父作用域中的 bool 值有条件地显示指令。我不明白为什么下面不起作用。 “不工作”是指没有显示任何指令。

 <ul class="nav navbar-nav pull-right" ng-switch="userIsAuthenticated">
    <account-item item="accountMenuItem" ng-repeat="accountMenuItem in anonymousMenuItems" ng-switch-when="false"></account-item>
    <account-item item="accountMenuItem" ng-repeat="accountMenuItem in authenticatedMenuItems" ng-switch-when="true"></account-item>
</ul>

即使在我的测试用例中“userIsAuthenticated”设置为“false”，也没有显示任何指令。如果我在指令上方添加 {{userIsAuthenticated}}，则会按预期输出“false”。

我也试过这个:

 <ul class="nav navbar-nav pull-right" ng-switch={{userIsAuthenticated}}>
    <account-item item="accountMenuItem" ng-repeat="accountMenuItem in anonymousMenuItems" ng-switch-when={{false}}></account-item>
    <account-item item="accountMenuItem" ng-repeat="accountMenuItem in authenticatedMenuItems" ng-switch-when={{true}}></account-item>
</ul>

如果我从它们将显示的任一指令中删除条件 ng-switch-when 属性。所以我知道问题出在我的 ng-switch 上。

Answer 1

在这个简化的演示中，您对 ng-switch 的使用是有效的，当然没有您的 account-item 指令: http://plnkr.co/AppN8xmFeIwjaP631lj7

如果没有看到 account-item 的代码，很难猜测是什么干扰了它。您可能会考虑使用 ng-if 来处理显示一个项目或另一个项目。

<ul>
  <div ng-if="!userIsAuthenticated">Content when not authenticated</div>
  <div ng-if="userIsAuthenticated">Content when authenticated</div>
</ul>

更新还要确保绑定(bind)到对象属性，而不是原始 bool 值。喜欢:用户。已验证