I'm working with angular-material and facing an issue with an md-switch element. The model of the switch is determined by a value in a JavaScript object. However, I want to avoid directly changing the object value when the user toggles the switch. Instead, I would like to call a function within the object that will handle the value change for me.
In the provided code snippet (or JSFiddle link below), you can observe that the toggle state remains unchanged.
While this example may be simplified, it raises the question of whether such functionality is achievable?
See the sample code below:
HTML
<div class="inset switchdemoBasicUsage" ng-controller="SwitchDemoCtrl" ng-cloak="" ng-app="MyApp">
<md-switch ng-model="data.state" aria-label="Switch 2" class="md-primary" ng-change="data.change()">
{{ data.state }}
</md-switch>
</div>
JS
angular.module('MyApp',['ngMaterial', 'ngMessages', 'material.svgAssetsCache'])
.controller('SwitchDemoCtrl', function($scope) {
$scope.data = {
state: true,
change: function() {
this.state = !this.state;
}
};
});
Here is the JSFiddle link for reference: http://jsfiddle.net/wx8s709z/