Wie binde ich 2 Modelle an ein Eingabefeld in Angular?


72

Kann ich trotzdem zwei Modellwerte an ein Eingabefeld binden?

Angenommen, ich habe ein Eingabefeld, das der Wert von zwei Variablen im Bereich sein soll, etwa:

<input type="text" model="sn_number; id" > 

Die Antwort ist nein. Weitere Informationen wären jedoch hilfreich, damit wir Ihnen mit Vorschlägen helfen können.
Greg

Antworten:


137

Sie können nicht, aber es gibt einige Problemumgehungen.

1. Verwenden Sie ngChange, um das andere Modell zu aktualisieren

<input type="text" 
       ng-model="sn_number" 
       ng-change="id=sn_number"/> 

2. Sie können ein Modell ansehen und bei Änderungen ein anderes aktualisieren

$scope.$watch('sn_number', function(v){
  $scope.id = v;
});

Sie müssten auch auf Änderungen achten, idwenn Sie sie synchron halten möchten.

Beispiel hier


3
Zu ng-modelIhrer ng-changeInformation : Der Grund, warum dies funktioniert, ist, dass Prio 1 und Prio 0 (ab Winkel 1.5) vorhanden sind und daher zuerst aufgerufen werden
user1859022

11

Sie können Felder sofort binden, nicht nur in ng-change, und tatsächlich ist es keine Datenbindung, sondern der einzige Winkelausdruck

  <label>Name</label>
  <input type="text" ng-model="name" value="{{name}}"/>

  <label>Key</label>
  <input type="text" ng-model="key" value="{{key=name}}" />


Es hat tatsächlich bei mir funktioniert, aber können Sie erklären, warum es funktioniert? Warum funktioniert es nicht, nur value = "{{name}}" zu verwenden?
Gil404

rette meinen Tag davor, viel $ watch zu schreiben :)
maruf571

7

Es wäre nicht sinnvoll, eine Eingabe an zwei Variablen im Modell zu binden. Die Bindung funktioniert in beide Richtungen. Wenn das Modell aktualisiert wird, wird das Feld aktualisiert und umgekehrt. Wenn Sie sich an zwei Variablen binden würden, was wäre die einzige Quelle der Wahrheit?

Sie können jedoch ng-change verwenden, um eine Methode auf dem Controller aufzurufen, die zwei Variablen festlegen kann, wenn sich das Feld ändert.


Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.