Question

我有一张图片，我将它用作按钮。当我点击按钮（图像）时，它应该显示项目列表。

<button class="styleTheSelection"><b>{{image.caption}}</b> <img src="css/images/more_p.png" class="styleTheBtn" onclick = "openList1()">
            </button>

<ul class="dropdown-menu">
  <li><a href = "/exampleFolder/file1.txt">List Item 1</a></li>
  <li><a href = "/exampleFolder/file2.txt">List Item 2</a></li>
  <li><a href = "/exampleFolder/file3.txt">List Item 3</a></li>
  <li><a href = "/exampleFolder/file4.txt">List Item 4</a></li>
  <li><a href = "/exampleFolder/file5.txt">List Item 5</a></li>
</ul>

Answer 1

您需要使用ng-click而不是onclick，并且您可以使用ng-show来显示触发点击的项目

<强>样本

＆＃13;

 var app = angular.module("app", []);

 app.controller("listController", ["$scope",
   function($scope) {
     $scope.showList = false;
     $scope.image = {};
     $scope.image.caption = "Click me";

     $scope.openList1 = function (){
       $scope.showList = true;
     };
   }
 ]);

＆＃13;

<!doctype html>
<html ng-app="app">
<head>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
  <script src="script.js"></script>
</head>
<body>
  <div ng-controller="listController">
    <button class="styleTheSelection"><b>{{image.caption}}</b> <img src="https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678092-sign-add-128.png" class="styleTheBtn" ng-click="openList1()">
    </button>
    <ul ng-show="showList" class="dropdown-menu">
      <li><a href="/exampleFolder/file1.txt">List Item 1</a></li>
      <li><a href="/exampleFolder/file2.txt">List Item 2</a></li>
      <li><a href="/exampleFolder/file3.txt">List Item 3</a></li>
      <li><a href="/exampleFolder/file4.txt">List Item 4</a></li>
      <li> <a href="/exampleFolder/file5.txt">List Item 5</a></li>
    </ul>
  </div>
</body>
</html>

＆＃13;

如何使用Angularjs单击图像按钮来显示和隐藏列表？

1 个答案: