Question

我正在使用ng-show和ng-hide显示我页面的横幅。当我登录时，我想展示不同的横幅而不是退出。所以我有两个带有ng-show和ng-hide的div，它的值在控制器中变为真和假。

Html代码：

第一个横幅：

<div id="firstPageHeader" class="navbar navbar-inverse" role="navigation" ng-show={{display}}>

第二个横幅：

<div id="restPageHeader" class="navbar-header" ng-hide={{display}}>

控制器：

var LoginController = function（$ scope）{

$scope.display = true;
$scope.loginUser = function(credentials){
console.log(credentials.username);
$scope.display = false;
}

$scope.logout = function(){
console.log('logout');
$scope.display = true;
}

所以这里根据登录和注销，显示值将变为true和false，但它没有发生的值仍然只是真。所以我想知道为什么即使我使用$ scope也没有改变这个值。$ apply（）

Answer 1

ngShow和ngHide指令期望表达式。所以它应该没有花括号{{（用于表达式插值）：

ng-show="display"

Answer 2

你能解释一下你如何使用loginUser（）和logout（），因为在我的情况下它工作得很好..

我的index.html是：

<!doctype html>
<html>
 <head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="switchcases"> <div ng-controller="LoginController">
<div ng-click="logout()">Hi</div>
<div ng-click="loginUser()">Bye</div>
<hr>
<div ng-show="display">Hi</div>
<div ng-hide="display">Bye</div>
</div>
</body>
</html>

和app.js是：

angular.module('switchcases',[])
.controller('LoginController',function($scope){
 $scope.display = true;
 $scope.loginUser = function(credentials){
//console.log(credentials.username);
 $scope.display = false;
 };
$scope.logout = function(){
//console.log('logout');
$scope.display = true;
 };
});

案例::当我点击Hi（<hr>标记上方的那个）时，只显示<hr>标记下方的“Hi”，当我点击Bye时（<hr>上方的那个）标记），只显示<hr>标记下方的“再见”，如预期的那样。

显示的默认值在<hr>标记下方为“Hi”。

如果您在控制器范围内使用loginUser（），请检查一次。

Answer 3

您只需要在ng-hide和ng-show双引号中替换大括号

<div id="restPageHeader" class="navbar-header" ng-hide="display">
        I am login 
        <img src="https://marketplace.canva.com/MABY09l0-Tw/1/0/thumbnail_large/canva-outlined-lettering-border-tumblr-banner-MABY09l0-Tw.jpg" alt="">
    </div>
    <div id="restPageHeader" class="navbar-header" ng-show="display">
        I am logout
        <img src="https://img.clipartfest.com/08e6b6a7495aca9bbc478fcf662cd29b_welcome-hanging-banner-welcome-banner-clipart_935-311.jpeg" alt="">
    </div>


this is controller 

$scope.display = true;
    $scope.loginUser = function () {
        console.log('loginUser');
        $scope.display = false;
    }
    $scope.logout = function () {
            console.log('logout');
            $scope.display = true;
        }

ng-show和ng-hide不绑定到angularjs中的给定变量

3 个答案: