angular.js - ng如何根据双向绑定的值自动向后台发送请求更新页面？

问题描述

场景描述：在page中有一个月份select下拉框，点击下拉框我们可以对应的月份

<select ng-model='month'></select>

在controller中，要根据选择的月份去后端获取对应的数据

$scope.$watch($scope.month, function(){ $http({ url:url,method:’GET’,withCredentials:true }).success(function(data,header,config,status){ // do something })});

我的思考：假设页面中有多个下拉框，利用$watch一个个监视$scope变化，很不理想。有没有思路可以不使用$watch,当ng-model变化时，controller中自动发送http请求获取数据呢？

求高手指点~

问题解答

你的$watch写错了：

你写成了： $scope.$watch($scope.month, ...应该写成： $scope.$watch(’month’, ...

下面这种方式也很简洁：

<select ng-model='year'></select><select ng-model='month'></select><select ng-model='day'></select>

$scope.changeDo = function(){ $http({url:url,method:’GET’,withCredentials:true }).success(function(data,header,config,status){ // do something });};$scope.$watch(’year’, $scope.changeDo);$scope.$watch(’month’, $scope.changeDo);$scope.$watch(’day’, $scope.changeDo);

如果用 ng-change，可能性能要好些。记得把上边的 $watch() 去掉：

<select ng-model='year' ng-change='changeDo();'></select><select ng-model='month' ng-change='changeDo();'></select><select ng-model='day' ng-change='changeDo();'></select>

性能差别基本可以忽略不计。之前做过类似的测试，执行100万次，差不了1秒钟。 如果我来做，会用$watch的方式，后期方便维护（ng-change方式 需要改动 控制器和 模板，watch方式只改动控制器就可以了）。

下拉框这种，一般使用ngChange指令来进行处理；ngChange

ngChange是最佳选择，原则上设置尽量少的监听队列，否则效率会很低。