保持 md-select 打开,直到在外部单击 - AngularJS
Keep md-select open until clicked outside - AngularJS
我正在使用 md-select 渲染带有 selectAll 选项的 md-checkbox。
如果我 select 全部,所有复选框都会 selected 并且下拉列表会关闭,这是预期的。
当 select 编辑除 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>
请指教。我检查了 md-select 的 API 但他们没有任何代码来保持下拉列表打开。另外,如何禁用单击 md-select 中的文本并仅对复选框启用单击?
您可以使用 md-select
中的 multiple
而不是 md-checkbox
。
但是您需要更新 changeCheckbox
函数 - 对于 select ALL
.
像这样:
<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>
您希望下拉菜单在单击全部时关闭,但在单击任何其他项目时保持打开状态。您可以检查您在 ng-repeat 中的值并添加 $event.stopPropagation();对于没有 'All' 的所有对象。您可以在 ng-click on 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>
我正在使用 md-select 渲染带有 selectAll 选项的 md-checkbox。
如果我 select 全部,所有复选框都会 selected 并且下拉列表会关闭,这是预期的。
当 select 编辑除 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>
请指教。我检查了 md-select 的 API 但他们没有任何代码来保持下拉列表打开。另外,如何禁用单击 md-select 中的文本并仅对复选框启用单击?
您可以使用 md-select
中的 multiple
而不是 md-checkbox
。
但是您需要更新 changeCheckbox
函数 - 对于 select ALL
.
像这样:
<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>
您希望下拉菜单在单击全部时关闭,但在单击任何其他项目时保持打开状态。您可以检查您在 ng-repeat 中的值并添加 $event.stopPropagation();对于没有 'All' 的所有对象。您可以在 ng-click on 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>