javascript $watch 或 ng-change，检测范围输入的 onchange 并根据值进行处理
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27077769/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
$watch or ng-change, to detect onchange on a range input and process according to the value
提问by Louis
I am new to AngularJS/Ionic and I am trying to detect the change of value of an input type="range", and to do things in js depending on this value.
我是 AngularJS/Ionic 的新手，我试图检测输入类型 =“范围”的值的变化，并根据这个值在 js 中做一些事情。
But I am not sure how to detect it : $watch or ng-change ?
但我不确定如何检测它： $watch 或 ng-change ？
Here's the code : HTML:
这是代码：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:
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;
}
});
回答by Jeremy Wilken
You could use either, though I recommend ngChange in this case. When you are watching an input, ngChange is usually the best choice. You should minimize $scope.$watch expressions for performance, and in this case it would duplicate what ngChange already handles. Remove the $watch.
您可以使用任何一种，但在这种情况下我建议使用 ngChange。当您查看输入时，ngChange 通常是最佳选择。您应该最小化 $scope.$watch 表达式以提高性能，在这种情况下，它会重复 ngChange 已经处理的内容。删除 $watch。
Your problem here is in the ng-model. You did not reference it correctly, you have levelvaluewhen your model is actually data.levelvalue. Also I removed the value="5"attribute, as ngModel takes care of this and it was getting in the way.
您的问题出在 ng-model 中。您没有正确引用它，levelvalue当您的模型实际上是data.levelvalue. 我也删除了该value="5"属性，因为 ngModel 会处理这个问题，并且它妨碍了。
<input id="levelrange" type="range" min="0" max="10" name="userlevelofsurfing" ng-model="data.levelvalue" ng-change="setLevelText()">
