javascript - 如果我点击 AngularJS 中的图标，如何显示 "Logout Button"

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>

当我单击图标时，我希望注销按钮显示为“下拉菜单”

我想将逻辑放入 Controller 中。

抱歉，我知道这是一项简单的任务，但我对 Angular js 完全陌生:/

Answer 1

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