Angularjsを使用して画像ボタンをクリックしてリストを表示および非表示にするにはどうすればいいですか？

イメージがあり、ボタンとして使用しています。ボタン（画像）をクリックすると、アイテムのリストが表示されます。Angularjsを使用して画像ボタンをクリックしてリストを表示および非表示にするにはどうすればいいですか？

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

出典

2016-12-10 kalai

あなたは代わりのonclickのng-clickを使用する必要がある、とあなたは焼成上の項目を示すためにng-showを使用することができますDEMO

NGをクリック

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; 
 
    }; 
 
    } 
 
]);

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

出典

2016-12-10 03:03:18 Sajeetharan

Angularjsを使用して画像ボタンをクリックしてリストを表示および非表示にするにはどうすればいいですか？

答えて

関連する問題