角材オプションを選択できるmd-selectとtrackBy

Question

私は、この角材のサンプルコード（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(); 
      }); 



}); 

Answer 1

：

： https://jsfiddle.net/hqck87t1/4/

var myModule = angular.module('BlankApp', ['ngMaterial']); 
    myModule.controller("FilterCtrl", function($scope, $element) { 

       $scope.categories = ["Any", "None", "Option 1", "Option 2", "Option 3", "Option 4"]; 

       $scope.mustCatSelected = []; 

       $scope.categoryObj = {}; 
       $scope.categoryObj.items = []; 
       $scope.categories.forEach(function(value,key){ 
        var grp; 
        if (key < 2){grp = key;} 
        if (key >= 2){grp = 2;} 
        $scope.categoryObj.items.push({ 
                 name: value, 
                 id: (key + 1), 
                 group: grp});      
       });   
       //set default 
       $scope.mustCatSelected.push($scope.categoryObj.items[0]); 






       $scope.clickOn = clickOn; 
       function clickOn(newValue, oldValue, type) { 

        //console.log($scope.categoryObj.items); 
        //console.log(oldValue); 
        if(oldValue.length == 0) { 
         return false; 
        } 

        //create arrays of new and old option ids 
        oldValue = JSON.parse(oldValue); 
        var newIds = []; 
        var oldIds = []; 

        newValue.forEach(function(value,key){ 

         newIds.push(value.id); 

        }); 

        oldValue.forEach(function(value,key){ 

         oldIds.push(value.id); 

        }); 

        //define and set the clicked value 
        var clickedValue; 
        newIds.forEach(function(value, key){ 

         if(oldIds.indexOf(value) == -1) { 
          clickedValue = value; 
         } 

        }); 

        var clickedGroup; 
        newValue.forEach(function(value,key){ 

         if(value.id == clickedValue){ 

          clickedGroup = value.group; 

         } 

        }); 

        //console.log([clickedValue, clickedGroup]);  
        //console.log([newIds, oldIds, clickedValue]); 
        if(type == 'mustCat'){ 
         $scope.mustCatSelected = $scope.mustCatSelected.filter(function(e){ 

           return e.group == clickedGroup; 

         }); 
        } 

       } 


       //search term above select 
       $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(); 
       }); 



    }); 

あり解決の鍵は二つのことです

1. ng-clickではなくng-changeを使用します。前者は、ng-modelの状態を、変更イベント後のng-modelの指定された状態と区別するために使用されます。これに対してng-clickは信頼できません。

2. このようなHTMLでNG変化関数を書くmustCatSelectedがNGモデルと「{{mustCatSelected}である NG-変化= "clickOn（mustCatSelected、 '{{mustCatSelected}}'）" } 'changeイベントの前のng-modelのインライン状態。

ここでは、オプション/オプショングループの選択を処理するロジックを備えた複数のmd-selectがあります。