2016-03-11 2 views
0

Я использую ng-переключатель следующим образом. Это правильное использование 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-hide/ng-show.

+0

Показать переменную '$ scope.userRole' в' console.log() '. Потому что 'ng-switch' работает так, как ожидалось. Пример в [jsfiddle] (https://jsfiddle.net/Stepan_Kasyanenko/zcqsepxr/). –

ответ

0

Вот аккуратная скрипка, которую я нашел о том, как работает ng-switch. То, как вы используете 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/

Смежные вопросы