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>

当我点击图标时，我希望注销按钮显示为＆＃34;下拉＆＃34;

我想将逻辑放在控制器中。

对不起，我知道这是一项简单的任务，但我在角度js中是全新的：/

Answer 1

您可以在图片上添加ng-click。这将调用一个函数来切换变量logout。

您也可以将logout = !logout直接放在ng-click指令

中

下拉列表效果必须使用css / js完成。这与AngularJS

无关

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

我在这里使用ng-click：当您点击图片时，它会更改logout的值（true - ＆gt; false; false - ＆gt; true）。您的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.

如何显示＆＃34;退出按钮＆＃34;如果我点击AngularJS中的图标

2 个答案: