如何在“AngularJS”中单击图标时显示“注销按钮”

问题描述：

如何在单击我的图标时显示注销按钮？如何在“AngularJS”中单击图标时显示“注销按钮”

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：/

的'dropdown'效果将在'CSS' – Weedoze

这里做的是一个例子，下一次尝试第一谷歌=）。 http://www.w3schools.com/angular/angular_select.asp 顺便说一下，你正在寻找的效果与Angular无关。它是CSS或JavaScript或两者兼而有之。 – Megajin

答

这里我用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.

甚至比你更简单:) – Kai

我已经尝试像你一样，但对我的例子来说，注销变量不会设置为true或false：O 如果我用logout测试它是{{logout}}变量将不会被分配真或假：/ – Kai

'注销是{{注销}}'只是打印变量，它不会影响其值 – Mistalis

答

您可以在图像上添加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>

如何在“AngularJS”中单击图标时显示“注销按钮”

相关推荐