この Angular Material のサンプル コード ( https://material.angularjs.org/latest/api/directive/mdSelect ) をニーズに合わせてカスタマイズしようとしています。
選択オプションの 3 つのグループがあります。オプションがグループで選択されている場合、他のグループのすべてのオプションを選択解除する必要があります (ただし、自分のグループの他のオプションはそのままにしておきます)。
私のコードでは、ロジックを正しく機能させることができました (下部の console.log 出力からわかるように) が、実際の選択オプションはユーザー入力と対話しません。
私の JSFiddle: https://jsfiddle.net/e2LLLxnb/8/
私のJSコード:
var myModule = angular.module('BlankApp', ['ngMaterial']);
myModule.controller("FilterCtrl", function($scope, $element) {
$scope.categories = ["Any", "Target Category", "Option 1", "Option 2", "Option 3", "Option 4"];
$scope.mustCatSelected;
$scope.categoryObj = {};
// build the list of options with values and groups - create equivalent of $scope.data for <md-option ng-repeat="item in categoryObj.data.items">
var finGroup = [];
$scope.categories.forEach(function(value,key){
if(key>1){
finGroup.push(key);
};
});
$scope.categoryObj.data = {items: [], groups: [{
group: [0]
}, {
group: [1]
}, {
group: finGroup
}]};
$scope.categories.forEach(function(value,key){
$scope.categoryObj.data.items.push({name: value,
value: false,
id: (key + 1)});
});
$scope.clickOn = function(item, index) {
if(item.value == false){item.value = item.name;}
else {item.value = false;}
if (item.value === false) {
} else {
var thisGroup = [];
angular.forEach($scope.categoryObj.data.groups, function(value, key) {
if (value.group.indexOf(index) !== -1) {
thisGroup = value.group;
}
});
angular.forEach($scope.categoryObj.data.items, function(value, key) {
if (thisGroup.indexOf(key) !== -1) {
return;
} else {
value.value = false;
}
});
$scope.mustCatSelected = $scope.categoryObj.data.items.filter(function(e){
return e.value != false;
});
console.log($scope.mustCatSelected);
console.log($scope.categoryObj.data.items);
}
}
//search-term header
$scope.searchTerm;
$scope.clearSearchTerm = function() {
$scope.searchTerm = '';
};
// The md-select directive eats keydown events for some quick select
// logic. Since we have a search input here, we don't need that logic.
$element.find('input').on('keydown', function(ev) {
ev.stopPropagation();
});
});