recherche

Maison  >  Questions et réponses  >  le corps du texte

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请求获取数据呢?

求高手指点~

ringa_leeringa_lee2740 Il y a quelques jours566

répondre à tous(3)je répondrai

  • 曾经蜡笔没有小新

    曾经蜡笔没有小新2017-05-15 17:08:13

    Votre $watch est mal écrit :

    你写成了:    $scope.$watch($scope.month, ...
    应该写成:    $scope.$watch('month', ...

    La méthode suivante est également très simple :

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

    Si vous utilisez ng-change, les performances peuvent être meilleures. N'oubliez pas de supprimer le $watch() ci-dessus :

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

    La différence de performances est fondamentalement négligeable. J'ai déjà fait un test similaire, exécuté 1 million de fois, en 1 seconde.
    Si je le fais, j'utiliserai la méthode $watch, qui est pratique pour la maintenance ultérieure (la méthode ng-change nécessite de changer le contrôleur et le modèle, tandis que la méthode watch n'a besoin que de changer le contrôleur).

    répondre
    0
  • 大家讲道理

    大家讲道理2017-05-15 17:08:13

    Les listes déroulantes

    sont généralement traitées à l'aide de la commande ngChange ngChange

    ;

    répondre
    0
  • 给我你的怀抱

    给我你的怀抱2017-05-15 17:08:13

    ngChange est le meilleur choix. En principe, définissez le moins de files d'attente d'écoute possible, sinon l'efficacité sera très faible.

    répondre
    0
  • Annulerrépondre