吴开关不工作

Question

我正在使用 ng-switch 如下。这是 ng-switch 的正确用法吗？我不希望它在数组中，因为我将它与范围变量一起使用。

在我的 HTML 中，我定义如下。 userRole 是我希望我的搜索基于的变量，在 when 中，我使用了基于我的 div 标签内容应该使用的值。

<div ng-switch on ="userRole">
  <div ng-switch-when="admin">
     [...]
  </div>
  <div ng-switch-when="user">
     [...]
  </div>

我无法访问 ng-switch 的功能，我的整个内容部分都消失了。

在我的 .js 文件中，我定义了以下内容：

if(loginModel.authorities[0].authority=="ROLE_ADMIN"){
  console.log("Me here");
  $scope.userRole="admin";
}
else
if(loginModel.authorities[0].authority=="ROLE_USER"){
  $scope.userRole="user";

}
else{
  $scope.userRole="guest";
}

但是我的屏幕没有显示任何东西，这让我想知道我应该如何使用ng-switch。我不想使用 ng-hide / ng-show。

Answer 1

这是我发现的有关 ng-switch 工作原理的简洁 fiddle...。您使用 ng-switch 的方式完全有效。我猜你的 userRole 没有任何价值导致它失败，你能仔细检查一下吗？

<div ng-controller="LoginCheckCtrl">
   <div ng-switch on="loginData"> 
      <div ng-switch-when="false" ng-include="'login'"></div>
      <div ng-switch-when="true" ng-include="'logout'"></div>
   </div>
</div>

<script type="text/ng-template" id="login">
    <button ng-click="login()">Login</button>
</script>

<script type="text/ng-template" id="logout">
    <button ng-click="logout()">Logout</button>
</script>

控制器代码：

var app = angular.module('myApp', []);

function LoginCheckCtrl($scope) {
    $scope.loginData = false
    $scope.login = function() {
        console.log($scope.loginData  ? 'logged in' : 'not logged in');
        $scope.loginData = true;
    };
    $scope.logout = function() {
        console.log($scope.loginData ? 'logged in' : 'not logged in');
        $scope.loginData = false;
    };
}

Fiddle https://jsfiddle.net/mrajcok/jNxyE/

吴开关不工作

Ng-switch not working

angularjs

ng-switch