Question

我是angularjs的初学者，我想知道如果我想根据点击的按钮弹出下拉列表应该使用什么代码。如果我点击印度，应该出现对应于印度的下拉列表，如果我点击巴基斯坦，则应该出现对应于巴基斯坦的下拉列表。

这是我迄今为止所尝试过的：

＆＃13;

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<style>

  button 
   { background-color: #4CAF50;
     color: white;
     display: inline-block;
     text-align: center;
     font-size: 16px ; 
   }

</style>

<body>


<div>
<br/>

<button type = "India" ng-click= "India_dropDown">India </button> <br/> <br/>
<button type = "Pakistan" ng-click= "Pakistan_dropDown">Pakistan </button>
</div>


<div ng-app="myApp" ng-controller="myCtrl">
<select ng-model= "India_dropDown" ng-options= " x for x in names1">
</select>
<select ng-model= "Pakistan_dropDown" ng-options= " y for y in names2">
</select>
</div>


<script>
var app = angular.module('myApp' , [] );
app.controller('myCtrl' , function($scope) {
  $scope.names1 = ['Sachin' ,'Dhoni','Virat','Dravid'] ;
  $scope.names2 = ['Shoaib' ,'Malik','Irfan','Sarfraz'] ;
});
</script>

</body>
</html>

＆＃13;

Answer 1

使用ng-show以编程方式显示或隐藏每个选择框。

<div ng-show="country === 'Packistan'">
    <!-- pakistan select -->
</div>

<div ng-show="country === 'India'">
    <!-- India select -->
</div>

按点击的内容切换国家/地区。

<button id="India" ng-click="toggleCountry($event)">India</button>
<button id="Pakistan" ng-click="toggleCountry($event)">Pakistan</button>

在你的控制器......

$scope.country = "";
$scope.toggleCountry = function(e) {
    $scope.country = e.target.id;
}

或者只是直接在ng-click操作中设置。

<button id="India" ng-click="country = 'India';">India</button>
<button id="Pakistan" ng-click="country = 'Pakistan';">Pakistan</button>

Answer 2

我创建了一个小提琴手here来演示解决方案。基本上我是在弹出框所需的选择框上触发鼠标按下事件。

的控制器

$scope.indiaDropDown = function() { var dropdown = document.getElementById('indiaselect'); var event = document.createEvent('MouseEvents'); event.initMouseEvent('mousedown', true, true, window); dropdown.dispatchEvent(event); } $scope.pakDropDown = function() { var dropdown = document.getElementById('pakselect'); var event = document.createEvent('MouseEvents'); event.initMouseEvent('mousedown', true, true, window); dropdown.dispatchEvent(event); }

<强> HTML

<select ng-model="India_dropDown" id="indiaselect" ng-options=" x for x in names1"> </select> <select ng-model="Pakistan_dropDown" id="pakselect" ng-options=" y for y in names2"></select> <br/> <button type="India" ng-click="indiaDropDown()">India </button> <br/> <button type="Pakistan" ng-click="pakDropDown()">Pakistan </button>

我不确定你是打开下拉菜单还是只显示/隐藏它。如果您想要显示/隐藏选择框，请考虑使用ng-show / ng-hide。我的解决方案将打开下拉列表。

Answer 3

也许是这样的：

＆＃13;

<!DOCTYPE html>
    <html>

    <head>
        <meta charset="utf-8" />
        <title>AngularJS Plunker</title>
        <link href="style.css" rel="stylesheet" />
        <script data-semver="1.4.6" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.min.js" data-require="angular.js@1.4.x"></script>
    </head>

    <body ng-app="myApp">


            <div ng-controller="myCtrl">
            <div>
                <button type="button" ng-click="setCountry(india)">India</button>
                <button type="button" ng-click="setCountry(pakistan)">Pakistan </button>
            </div>
            <select ng-model="country_select" ng-options="x for x in country"></select>
            </div>


            <script>
                var app = angular.module('myApp' , [] );
                
                app.controller('myCtrl' , ['$scope', function($scope) {
                    $scope.country = [];
                    $scope.india = ['Sachin' ,'Dhoni','Virat','Dravid'];
                    $scope.pakistan = ['Shoaib' ,'Malik','Irfan','Sarfraz'];
                    
                    $scope.setCountry = function(name){
                        $scope.country = name;
                    };
                }]);
            </script>

        </body>
    </html>

＆＃13;

如何在单击按钮时弹出下拉列表

3 个答案: