Angular JS: get ng-Modell auf ng-Änderung

Ich habe folgende HTMLAngular JS: get ng-Modell auf ng-Änderung

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

, die mit einer Liste von Ländern

durch das folgende Objekt zugeführt wird beeing

$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} ...];

Wenn ich meine ändern Dropdown-Wert Ich habe erwartet, dass mein Modell ($ scope.country) innerhalb der filterByCountry-Funktion aktualisiert wird, aber nicht. Was fehlt mir hier?

Quelle

2014-03-26 Joao Almeida

benötigt nicht ng-change ''ng-change =" filterByCountry() "' dann greifen Sie einfach auf $ scope.country in der Methode. – BenCr

Genau das scheint das Problem zu sein ... http: // jsbin.com/paguwehu/2/ – PSL

Ich habe die Klammer beim Erstellen der Frage vergessen, aber das ist nicht das Problem hier –

Der Handler ng-change wird ausgelöst, bevor die ng-model tatsächlich aktualisiert wird. Wenn Sie filterByCountry wollen jedes Mal $scope.country Änderungen entlassen werden (und nicht nur, wenn die Dropdown-Änderungen), sollten Sie die folgenden statt:

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

Ich finde es immer nützlicher Veränderungen in meinem $scope zu reagieren, anstatt DOM-Ereignisse wenn möglich.

Quelle

2014-03-26 18:07:40

Ich habe bereits versucht, Ihre Lösung, aber die Uhr wird nicht ausgelöst, wenn Dropdown-Wert ändern: S –

@ JoaoAlmeida - Haben Sie eine Geige oder irgendetwas? –

Ihre Antwort war richtig (obwohl ich diese Lösung versucht habe, bevor ich die Frage gestellt habe). Mein Problem war, dass ich ng-if benutzt habe, um dieses Drop-Down zu zeigen. Ich ändere für ng-Show und funktioniert jetzt gut. Danke;) –

Nur für alle anderen hier kommen, ng-change heißt eigentlich nach der Modellwert festgelegt wurde.

Warum?
Mal sehen wann es heißt. Von der angular source code, ng-change ist nur eine attribute-Direktive mit diesem Directive Definition Object (DDO).

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

Daraus sehen wir, dass die ng-change Richtlinie ist sehr einfach. Alles, was ng-change='<expr>' tut, ist eine Funktion am Ende $viewChangeListeners, die <expr> über $scope.$eval auswertet.

OK ... also wann werden die ViewChangeListeners aufgerufen?

Nun, wenn wir in der Dokumentation zu ngModel.NgModelController aussehen:

der neue Wert wird auf $ modelValue und dann der Ausdruck im Attribut ng-Modell angegeben angewendet werden. Schließlich werden alle registrierten Änderungslistener in der Liste $ viewChangeListeners genannt.

So ist der viewChangeListener für die ngChange wird nach aufgerufen wird, wird der Wert auf $modelValue angewandt. Daher wird der Rückruf aufgerufen nach das Modell als festgelegt wurde.

Beachten Sie auch, dass dieses Verhalten in allen eckigen Versionen gleich ist. Die Definition für ng-change hat sich seit v1.2 nicht geändert.

Quelle

2016-01-28 18:09:06

Angular JS: get ng-Modell auf ng-Änderung

Antwort

Verwandte Themen