如何在「AngularJS」中單擊圖標時顯示「註銷按鈕」

Question

如何在單擊我的圖標時顯示註銷按鈕？

home.html的：

<div class="icon-bar"> 
    <div class="logout"> 
    <img src="/Login/images/login.png" ng-model="logout"> 
    <div class="check-element animate-hide" ng-show="logout"> 
     <button>Logout</button> 
    </div> 
    <div class="check-element animate-hide" ng-hide="logout"> 
    </div>  
    </div> 
<div> 

當我點擊該圖標，我想註銷按鈕出現像「下拉菜單」

我想把邏輯控制器。

對不起，我知道這是一件容易的事，但我全新的角度JS：/

Answer 1

這裏我用ng-click：當你將在圖像上單擊，它會改變的logout（真值 - >假;假 - >真）。您的ng-show/ng-hide將按照您的預期工作。

<div class="logout"> 
    <img src="/Login/images/login.png" ng-click="logout = !logout"> 
    <div class="check-element animate-hide" ng-show="logout"> 
     <button>Logout</button> 
    </div> 
    <div class="check-element animate-hide" ng-hide="logout"> 
     logout is {{logout}} 
    </div>  
</div> 

Try is on JSFiddle.

Answer 2

您可以在圖像上添加ng-click。這將調用一個函數來切換變量logout。

你也可以把logout = !logout直接ng-click指令

的下拉效果要與CSS/JS做內部。這有沒有關係AngularJS

var app = angular.module('myApp', []); 
 
app.controller('myCtrl', function($scope) { 
 
    $scope.logout = false; 
 

 
    $scope.toggleLogout = function() { 
 
    $scope.logout = !$scope.logout; 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div class="logout" ng-app="myApp" ng-controller="myCtrl"> 
 
    <img src="/Login/images/login.png" ng-click="toggleLogout()"> 
 
    <div class="check-element animate-hide" ng-show="logout"> 
 
    <button>Logout</button> 
 
    </div> 
 
    <div class="check-element animate-hide" ng-hide="logout"> 
 
    </div> 
 
</div>