Kai Kai - 10 days ago 5
AngularJS Question

How can i show a "Logout Button" if i click on a icon in AngularJS

How can i show a Logout Button if i clicked on my icon ?

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>




if i clicked on the icon, i want the logout button to shown like a "dropdown"

i want to put the logic in a controller.

Sorry i know its a easy task, but i am totally new in angular js :/

Answer

You can add ng-click on the image. This will call a function that will toggle the variable logout.

You can also put logout = !logout directly inside the ng-click directive

The dropdown effect has to be done with css/js. This has nothing to do with 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>