Question

我尝试根据自己的需要自定义此Angular Material示例代码（https://material.angularjs.org/latest/api/directive/mdSelect）。

我有三组选择选项。如果在组中选择了一个选项，则应取消选择其他组中的所有选项（但将其他选项保留在自己的组中）。

在我的代码中，我设法使逻辑正常工作（正如您将从底部的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();
            });



});

Answer 1

解决了（终于！）：https://jsfiddle.net/hqck87t1/4/

解决方案的关键在于两件事：

使用ng-change而不是ng-click。前者用于区分ng-model内联状态与更改事件后ng-model的指定状态。而ng-click对此不可靠。
在html中写下ng-change函数，如下所示： ng-change =＆＃34; clickOn（mustCatSelected，＆＃39; {{mustCatSelected}}＆＃39;）＆＃34; 其中mustCatSelected是ng-model和＆＃39; {{mustCatSelected}}＆＃39;变更事件之前的ng-model的内联状态。

现在我们有一个多个md-select，逻辑处理选项/选项组的选择。

Angular Materials md-select和trackBy允许选择选项

1 个答案: