Search code examples
angularjsangularjs-material

Md-select & Md-options Using Multiple Swap Values AngularJS Angular Material


Greetings I'm a bit new with using md-select and md-options and have run into a bit of a road block. I need to change a value based off of if an item from md-option is selected and set it to true and if it is not return it back to false. However, I'm a bit lost in how to do this and could use some direction. Currently, I'm trying to run a function that changes this, but I can't seem to understand how to pass the correct object over.

I think I'm missing something logically with md-options and md-select any help is appreciated.

    //Array of objects in ng-repeat
var vm= $scope;
  vm.metricsArr = [
    {id: 0, name:"Aircraft Commander", valId:false},
    {id: 1, name:"Flight Hours", valId: false},
    {id: 2, name:"# of Sorties", valId: false}];

//Change value
vm.changeMetrics = function(passedInParam){
//nothing in here since I cant get it to work currently
};

//HTML where i pass object in to change value
 <md-select multiple ng-model="i" ng-model-options= "{trackBy: '$value.id'}" ng-change="changeMetricVal(i);">
                <md-option ng-value="i" ng-repeat="i in metricsArr">
                  {{i.name}}
                </md-option>
              </md-select>

Solution

  • For some reason ng-change doesn't get called (I seem to remember coming across this problem before with md-select). What can you do is use $scope.$watch - CodePen

    Markup

    <div ng-controller="AppCtrl as vm" ng-cloak="" ng-app="MyApp">
      <md-select multiple ng-model="i" ng-model-options= "{trackBy: '$value.id'}" aria-label="Select">
        <md-option ng-value="i" ng-repeat="i in vm.metricsArr">
            {{i.name}}
        </md-option>
      </md-select>
    </div>
    

    JS

    angular.module('MyApp',['ngMaterial'])
    
    .controller('AppCtrl', function($scope) {
      var vm = this;
      vm.metricsArr = [
        {id: 0, name:"Aircraft Commander", valId:false},
        {id: 1, name:"Flight Hours", valId: false},
        {id: 2, name:"# of Sorties", valId: false}];
    
      $scope.$watch("i", function (newValue) {
        console.log(newValue);
      });
    });