CODEWITHSUNDEEP
angularjsangularjs-material
CodingTutorials360
CodingTutorials360

Reputation: 25

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>

Upvotes: 1

Views: 1524

Answers (1)

camden_kid
camden_kid

Reputation: 12813

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);
  });
});

Upvotes: 1

Related Questions