Angular JS: obtenir ng-model sur ng-change

J'ai le code HTML suivant

<select ng-model="country" ng-options="c.name for c in countries" ng-change="filterByCountry"></select>

C'est en étant alimenté par l'objet suivant avec une liste de pays

$scope.countries = [{name:Afeganistão, country:AF}, {name:África do Sul, country:ZA}, name:Albânia, country:AL}, {name:Alemanha, country:DE}, {name:Andorra, country:AD} ...];

Quand j'ai changer mon déroulante valeur que j'attendais mon modèle ($champ d'application.pays) pour être mis à jour, à l'intérieur de filterByCountry fonction, mais il ne l'est pas. Ce qui me manque ici?

source d'informationauteur Joao Almeida

  1. 9

    La ng-change gestionnaire est déclenché avant la ng-model est effectivement mises à jour. Si vous voulez filterByCountry être déclenché à chaque fois $scope.country changements (plutôt que juste au moment où la liste déroulante change), vous devez utiliser ce qui suit:

    $scope.$watch('country', filterByCountry);

    Je trouve toujours qu'il est plus utile de réagir à des changements dans ma $scope plutôt que d'événements DOM lorsque cela est possible.

  2. 8

    Juste pour quelqu'un d'autre de venir ici,
    ng-change est en fait appelé après le modèle de valeur a été définie.

    Pourquoi?

    Nous allons voir quand est-il appelé.
    À partir de la angulaire code source, ng-change est juste un attribut de la directive la présente directive définition de l'objet (DDO).

    {
    restrict: 'A',
    require: 'ngModel',
    link: function(scope, element, attr, ctrl) {
      ctrl.$viewChangeListeners.push(function() {
        scope.$eval(attr.ngChange);
      });
    }
}

    De cela, nous voyons que le ng-change directive est très simple. Tout ce que ng-change='<expr>' n'est ajouter une fonction à la fin de $viewChangeListeners qui évalue <expr> via $scope.$eval.

    OK ... quand c'est le ViewChangeListeners appelé?

    Bien, si l'on regarde la documentation de ngModel.NgModelController:

    la nouvelle valeur sera appliquée à $model value est utilisée, puis l'expression spécifiée dans la ng-attribut du modèle. Enfin, tous les inscrits changement des auditeurs, dans l' $viewChangeListeners liste, sont appelés.

    De sorte que le viewChangeListener pour la ngChange sera invoquée après la valeur est appliquée à $modelValue. D'où le callback sera appelé après le modèle a été défini.

    Également noter que ce comportement est le même dans toutes les versions de anguleux. La définition de ng-change n'a pas changé depuis v1.2.