Wie kann ich ng-init machen, um ng-change auszulösen?

Question

Ich habe gerade begonnen, Angular zu lernen. Es gibt ein <select> Element, das die Eingabeelemente unten mit einem von einigen Geschenken füllen sollte.

Das ist meine Ansicht.

<select 
    ng-model="selection" 
    ng-options="preset.name for preset in presets" 
    ng-init="selection=presets[0]" 
    ng-change="select()"></select> 

<input ng-model="name" type="text"/> 
<textarea ng-model="description"></textarea> 

Dies ist mein Controller.

Wenn ich die Seite lade, kann ich die erste Option sehen. Aber die Eingabefelder bleiben leer, bis ich die Auswahl manuell ändere. Warum setzt Angular die Eingabefelder nicht automatisch an erster Stelle und was kann ich dagegen tun?

Answer 1

Der Grund ist es nicht die Textfelder zunächst nicht festgelegt ist, weil es keine Bindung Setup für $ scope.name ist und $ scope.description bis select() aufgerufen wird.

$scope.init = function(selected) {  
    $scope.selection = selected; 
    $scope.name = $scope.selection.name; 
    $scope.description = $scope.selection.description; 
} 
$scope.select = function() { 
    $scope.name  = $scope.selection.name; 
    $scope.description = $scope.selection.description; 
}; 

Und in Ihrem HTML:

<select 
    ng-model="selection" 
    ng-options="preset.name for preset in presets" 
    ng-init="init(presets[0])" 
    ng-change="select()"></select> 

Alternative Methode:

Alternativ können Sie die Eingabefelder auf die Bindung haben Sie könnten es zunächst in Ihrem Controller-Funktion einrichten dasselbe Auswahlmodell. Auf diese Weise, Wenn das Auswahlmodell auf dem Bereich aktualisiert wird, aktualisiert es alle zugehörigen Ansichten.

ändert das Modell zu ‚selection.name‘ und ‚selection.description‘:

<input ng-model="selection.name" type="text"/> 
<textarea ng-model="selection.description"></textarea> 

Es besteht keine Notwendigkeit für die select() Funktion mehr, weil es bereits ein Zwei-Wege-Bindungsaufbau zwischen dem ausgewählten Modell und die Eingabefelder.