$ watch or ng-change to detect onchange on the input and process of the range according to the value
I am new to AngularJS / Ionic and I am trying to detect when input type = "range" value changes and do things in js depending on that value.
But I'm not sure how to detect it: $ watch or ng-change?
Here's the code: HTML:
<html ng-app="SnowBoard">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Checkboxes</title>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
</head>
<body ng-controller="ComputeCtrl">
<ion-content>
<div class="range">
<input id="levelrange" type="range" min="0" max="10" value="5" name="userlevelofsurfing" ng-model="levelvalue" ng-change="setLevelText()">
{{levelvalue}}
</div>
<div id="leveldisplay">
</div>
{{testvariable}}
</ion-content>
</body>
</html>
JS:
angular.module('SnowBoard', ['ionic'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if(window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleDefault();
}
});
})
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: "/app",
abstract: true,
templateUrl: "templates/menu.html",
controller: 'AppCtrl'
})
.state('app.browse', {
url: "/browse",
views: {
'menuContent' :{
templateUrl: "templates/compute.html",
controller: 'ComputeCtrl'
}
}
})
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/app/playlists');
})
.controller('ComputeCtrl', function($scope, $ionicPopup, $timeout) {
$scope.data = {
levelvalue: 5,
level1wordDescription: "INTERMEDIATE+",
testvariable: "dummy"
}
$scope.$watch('data.levelvalue', function(newVal, oldVal) {
console.log('data.levelvalue is now '+newVal);
console.log('data.levelvalue is now '+data.levelvalue);
});
$scope.setLevelText = function(rangeValue) {
console.log('range value has changed to :'+$scope.data.levelvalue);
$scope.data.testvariable = $scope.data.levelvalue;
}
});
source to share
You can use either, although I recommend ngChange in this case. When looking at the input, ngChange is usually the best choice. You have to minimize $ scope. $ Watch expressions for performance, in which case it will duplicate what ngChange is already handling. Remove $ watch.
Your problem here is ng-model. You didn't reference it correctly, you have levelvalue
it when your model actually is data.levelvalue
. Also I removed the attribute value="5"
since ngModel will take care of this and it gets in the way.
<input id="levelrange" type="range" min="0" max="10" name="userlevelofsurfing" ng-model="data.levelvalue" ng-change="setLevelText()">
source to share