保持md-select处于打开状态，直到在外部单击为止-AngularJS
[英]Keep md-select open until clicked outside - AngularJS
问题描述
I am using md-select rendering md-checkbox wiyth a selectAll option. 
我正在使用带有selectAll选项的md-select渲染md-checkbox。
If I select all, all checkboxes are selected and the dropdown closes which is expected. 如果我全部选中，则所有复选框都将选中，并且下拉菜单将关闭，这是预期的。
How do I trigger not to close the dropdown when any value other than All is selected and close it on outside click? 当选择除All以外的任何值并在外部单击时将其关闭时，如何触发不关闭下拉菜单？
var app = angular.module('BlankApp', ['ngMaterial', 'ngMessages']); app.controller('mdSelectController', function($scope, $mdPanel, $mdSidenav, $mdDialog) { $scope.helpers = [{ name: 'All', selected: false }, { name: 'Ron', selected: false }, { name: 'Jim', selected: false }, { name: 'John', selected: false }, { name: 'Paul', selected: false }, { name: 'Jeremie', selected: false } ]; $scope.changeCheckbox = function(rating) { console.log(rating) if (rating.name === 'All' && rating.selected === true) { _.forEach($scope.helpers, function(item) { item.selected = true; }); } if (rating.name === 'All' && rating.selected === false) { _.forEach($scope.helpers, function(item) { item.selected = false; }); } if (rating.name !== 'All') { console.log("Not all"); _.forEach($scope.helpers, function(item) { if (item.name === 'All') { item.selected = false; } }); } }; });
<html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Angular Material style sheet --> <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.8/angular-material.min.css"> </head> <body ng-app="BlankApp" ng-controller="mdSelectController" ng-cloak> <!-- Your HTML content here --> <!-- Angular Material requires Angular.js Libraries --> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-animate.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-aria.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-messages.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script> <!-- Angular Material Library --> <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.8/angular-material.min.js"> </script> <md-input-container> <label>Rating</label> <md-select id="ratingDropdown" ng-model="automationRatingObj" md-container-class="ratingDropdown" required="required"> <md-option ng-value="rating" ng-repeat="rating in helpers track by $index"> <md-checkbox ng-model="rating.selected" aria-label="Select a Rating" ng-change="changeCheckbox(rating)"></md-checkbox>{{rating.name}} </md-option> </md-select> </md-input-container> </body> </html>
Please advice. 请指教。 I checked the API of md-select but they dont have any code to keep the dropdown open. 我检查了md-select的API，但它们没有任何代码可保持下拉菜单打开。 Also, how do I disable click on the text inside md-select and enable click only for checkbox? 另外，如何禁用单击md-select内的文本并启用仅针对复选框的单击？
2 个解决方案
解决方案1
2 已采纳 2018-09-17 19:56:38
You want the dropdown to close when clicking all, but to remain open when clicking any other item. 您希望下拉菜单在单击全部时关闭，但在单击其他任何项时保持打开状态。 You can check for which value you are at in ng-repeat and add $event.stopPropagation(); 您可以在ng-repeat中检查您的值，然后添加$ event.stopPropagation（）;。 to all objects without 'All'. 没有“全部”的所有对象。 You can do this using ternary operator on ng-click on md-option: ng-click="rating.name != 'All' ? $event.stopPropagation(): ''" 您可以在ng-单击md-option上使用三元运算符来执行此操作：ng-click =“ rating.name！='All'？$ event.stopPropagation（）：''”
var app = angular.module('BlankApp', ['ngMaterial', 'ngMessages']); app.controller('mdSelectController', function($scope, $mdPanel, $mdSidenav, $mdDialog) { $scope.helpers = [{ name: 'All', selected: false }, { name: 'Ron', selected: false }, { name: 'Jim', selected: false }, { name: 'John', selected: false }, { name: 'Paul', selected: false }, { name: 'Jeremie', selected: false } ]; $scope.changeCheckbox = function(rating) { console.log(rating) if (rating.name === 'All' && rating.selected === true) { _.forEach($scope.helpers, function(item) { item.selected = true; }); } if (rating.name === 'All' && rating.selected === false) { _.forEach($scope.helpers, function(item) { item.selected = false; }); } if (rating.name !== 'All') { console.log("Not all"); _.forEach($scope.helpers, function(item) { if (item.name === 'All') { item.selected = false; } }); } }; });
<html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Angular Material style sheet --> <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.8/angular-material.min.css"> </head> <body ng-app="BlankApp" ng-controller="mdSelectController" ng-cloak> <!-- Your HTML content here --> <!-- Angular Material requires Angular.js Libraries --> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-animate.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-aria.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-messages.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script> <!-- Angular Material Library --> <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.8/angular-material.min.js"> </script> <md-input-container> <label>Rating</label> <md-select id="ratingDropdown" ng-model="automationRatingObj" md-container-class="ratingDropdown" required="required"> <md-option ng-value="rating" ng-repeat="rating in helpers track by $index" ng-click="rating.name != 'All' ? $event.stopPropagation(): ''" > <md-checkbox ng-model="rating.selected" aria-label="Select a Rating" ng-change="changeCheckbox(rating)"></md-checkbox>{{rating.name}} </md-option> </md-select> </md-input-container> </body> </html>
解决方案2
1 2018-09-17 19:44:06
You can use multiple from md-select instead of using md-checkbox . 您可以从md-select使用multiple ，而不是使用md-checkbox 。 But you need update changeCheckbox function - for select ALL . 但是，你需要更新changeCheckbox功能-用于选择ALL 。
Something like this: 像这样：
<md-select id="ratingDropdown" ng-model="automationRatingObj" md-container-class="ratingDropdown" required="required" multiple="true" ng-change="changeCheckbox()">
<md-option ng-value="rating" ng-repeat="rating in helpers track by $index" >
{{rating.name}}
</md-option>
</md-select>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.