Matériaux angulaires md-select et trackBy permettant de sélectionner les options

Question

J'essaie de personnaliser cet exemple de code angulaire (https://material.angularjs.org/latest/api/directive/mdSelect) selon mes besoins.

J'ai trois groupes d'options de sélection. Si une option est sélectionnée dans un groupe, elle doit désélectionner toutes les options des autres groupes (mais laisser les autres options dans leur propre groupe telles qu'elles sont).

Dans mon code, j'ai réussi à faire fonctionner la logique correctement (comme vous le verrez dans les sorties de console.log en bas), mais les options de sélection réelles n'interagissent pas avec l'entrée de l'utilisateur.

Mon jsFiddle: https://jsfiddle.net/e2LLLxnb/8/

Mon code 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

Résolu (enfin!): 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(); 
       }); 



    }); 

Il touche à la solution réside dans deux choses:

1. Utilisation de ng-change au lieu de ng-clic. Le premier est utilisé pour distinguer l'état de ng-model inline de l'état spécifié de ng-model après l'événement change. Alors que ng-click n'est pas fiable pour cela.

2. Exprimer la fonction ng changement dans le code HTML comme ceci: ng changement = "clickOn (mustCatSelected, '{{mustCatSelected}}')" où mustCatSelected est le modèle ng et « {{mustCatSelected} } 'l'état inline de ng-model avant l'événement change.

Maintenant, nous avons un multiple-md-select avec une logique de gestion de la sélection des options/groupes d'options.