AngularJS Drop-Down (ng- Optionen) nicht bindend - String an Objekt (erste Auswahl)

Question

Ich habe ein Problem beim Binden von Daten, die vom Server abgerufen wurden, in eine Dropdown-Liste. Das Hauptproblem ist meiner Meinung nach die Tatsache, dass der Vergleich an verschiedenen Objekttypen vorgenommen wird. Beispiel: 1. Das vom Server zurückgegebene Objekt enthält eine Währungscodezeichenfolge. wir wollen, dass diese in der Dropdown-Liste ein Element gebunden sein

"baseCurrencyCode":"GBP" 

1. Die Ansicht Modell, um die Liste der Währungen gibt .. Diese werden als Liste zurückgegeben Währungs Objekte mit unterschiedliche Eigenschaften

   {"currencies":[{"id":1,"rateId":0,"abbreviation":"AFN","description":"Afghani","rate":0.0,"rateDescription":null,"languageCode":"en-gb","isDefault":true,"fullDescription":"AFN - Afghani - ","shortDescription":"AFN - Afghani"}} 
   

usw.

Derzeit habe ich diese Arbeit bekam durch eine Funktion für jedes Element in th durch jede Eigenschaft gehen schreiben Suchen Sie die richtige Eigenschaft, mit der Sie vergleichen möchten - führen Sie den Vergleich durch und geben Sie dann die ursprüngliche Auswahl zurück.

Wenn ich meine Speichermethode aufruft, muss ich die Währungsabkürzung manuell an das Objekt binden, das ich an den Server zurückgeben möchte.

Sicherlich muss es einen besseren Weg geben, dies zu tun?

Referenz Einige meiner Code ..

<select ng-model="selectedCurrency" ng-options="currency.shortDescription for currency in viewModel.currencies"></select> 

// Call to my custom method..List, PropertyName, value to compare 
$scope.selectedCurrency = InitialiseDropdown($scope.viewModel.currencies, "abbreviation", $scope.updatedObject.baseCurrencyCode); 

// Code executed when saving - to bind the currency to the updated object 
$scope.updatedObject.baseCurrencyCode = $scope.selectedCurrency.abbreviation; 

Jede Hilfe ist willkommen! Zusammengefasst ..

Das Hauptproblem hier ist die Bindung an den Drop-Down-und Vorselektion

EDIT Sorry, wenn ich nicht klar genug .. war.

Das Objekt, das wir aktualisieren, enthält einen Parameter (String) der Währungsabkürzung.

Die Liste, aus der wir auswählen, ist eine Liste von Währungsobjekten. Da es sich um zwei verschiedene Objekttypen handelt, konnte ich keine angulars 2-Wege-Bindung einstecken und habe dafür Code geschrieben, um dies beim ersten Abruf und beim Speichern zu tun.

Der sauberste Weg, um dies zu beheben, wäre, ein Währungsobjekt in unserem Retrieval anstelle einer einfachen Zeichenfolge der Abkürzung zurückzugeben, aber das ist keine Option.

Gibt es eine bessere Möglichkeit, die 2-Wege-Bindung für verschiedene Objekttypen zu aktivieren?

Thanks again

Answer 1

Es ist nicht ganz klar, was das Problem ist, aber Sie können durch Bindung des <select> auf die aktuell ausgewählte Währungsobjekt (so müssen Sie es nicht nachschlagen später) sich etwas Arbeit sparen .
select + ngOptions ermöglicht es Ihnen, einen Wert zu binden, während eines anderen, mit folgenden Syntax anzeigt:

<select ng-model="selectedCurrency" 
     ng-options="currency as currency.shortDescription 
        for currency in viewModel.currencies"> 
</select> 

Im obigen Beispiel wird $scope.selectedCurrency auf das gesamten currency Objekt gebunden werden, aber currency.shortDescription wird in dem angezeigt Dropdown-Liste.

---

See, auch dieses short demo.

---

UPDATE:

Falls Sie brauchen nicht auf das gesamte Währungsobjekt zu binden, sondern binden nur updatedObject ‚s baseCurrencyCode Eigenschaft auf die Abkürzung für die ausgewählte (in Drop-Down) Währung, Sie können es wie folgt tun:

<!-- In the VIEW --> 
<select ng-model="updatedObject.baseCurrencyCode" 
     ng-options="c.abbreviation as c.shortDescription 
        for c in currencies"> 
</select> 

// In the CONTROLLER 
$scope.currencies = [...]; 
$scope.updatedObject = { 
    ... 
    baseCurrencyCode: <baseCurrencyCodeFromServer> 
}; 

---

See, auch, dass short demo.

Answer 2

Ich hatte das gleiche Problem, ng-Modell und ng-Option aus 2 verschiedenen Quellen. Mein ng-Modell ist an einen Wert in einem json-Objekt gebunden, der einen gewählten Dateinamen repräsentiert, und meine ng-Option ist eine Liste möglicher Werte, die aus einer CSV-Datei stammen.

In dem Regler I über eine NodeJS Route ein Verzeichnis lese und ein json Array von Dateinamen wie diese

var allCsvFiles = [{"name":"file1.csv"},{"name","file2.csv},etc..] 

Die aktuelle CSV-Datei, dh die ausgewählten in einem anderen json Array gespeichert

Schaffung

[{"date":"01-06-2017","csvfile":"file1.csv","colour":"red"},{...}, etc]. 

ich war mit dem folgenden Code für das Drop-Down-:

<select type="text" ng-model="file.csvfile" 
ng-options="opt.name for opt in allCsvFiles track by opt.name"></select> 

Dies hat dazu geführt, dass die aktuelle Auswahl leer war und wenn ich ein Element aus dem Dropdown ausgewählt habe, wurde [Objekt], [Objekt] als aktuelle Auswahl verwendet. Wenn ich durch den Code ging, fand ich, dass es schien, dass {Name, "file1.csv"} als Option ausgewählt wurde und es nicht angezeigt werden konnte, das schien seltsam, da meine Auswahl von ng-Optionen aussieht, als sollte sie einfach zurückkehren der Wert von "name" ist nicht der Array-Eintrag. Ich habe versucht, viele verschiedene Möglichkeiten, diese Arbeit zu machen, aber schließlich fand ich, dass, wenn ich die Liste der möglichen Auswahlen eine einfache JavaScript-Array gemacht:

var allCsvFiles = ["file1.csv","file2.csv", "file3,csv] 

und verändert die Auswahl zu:

<select type="text" ng-model="file.csvfile" ng-options="opt for opt in allCsvFiles"></select> 

dann die Dropdown Auswahl funktionierte wie erwartet.

Ich habe vielleicht eine andere offensichtliche Lösung verpasst, aber da die Anordnung der JSON-Objekte sowieso eindimensional ist, scheint es kein Problem zu sein.

Es sieht aus wie die OPs Frage beantwortet wurde, ich dachte nur, ich würde hinzufügen, wie es für mich gelöst.