AngularJS - Währungswechselfilter mit externem Ausgang

Question

Ich versuche einen Filter basierend auf this post zu erstellen. Ich möchte in der Lage sein, von einer Währung zur anderen zu wechseln, indem ich eine Auswahleingabe mit einem ng-Klick darauf umschalte, aber ich bekomme die Eingabe nicht in den Filter.

Mein html ist:

<div ng-controller="myCtrl"> 
    you have, {{money | currency}}...<br><br> 
</div> 
<select> 
    <option ng-click="currencySymbol = 'USD'; currencyRate=exchange.usd.rate">USD<option> 
    <option ng-click="currencySymbol = '£'; currencyRate=exchange.pound.rate">£<option> 
    <option ng-click="currencySymbol = '€'; currencyRate=exchange.euro.rate">€<option> 
</select> 

und der Winkel Teil:

angular 
.module('myApp', []) 
.controller('myCtrl', function($scope) { 
    $scope.money = 100; 
    $scope.exchange = [ 
     {"usd":{"rate":1}}, 
     {"pound":{"rate":0.702846}}, 
     {"euro":{"rate":0.885055}} 
    ]; 
}) 

.filter('currency', function() { 
    var defaultCurrency = 'USD'; 
    return function(input, currencySymbol, currencyRate) { 
     var out = ""; 
     currencySymbol = currencySymbol || defaultCurrency; 
     currencyRate = currencyRate || 1.00; 

     out = input * currencyRate; 

     return out + ' ' + currencySymbol; 
     } 
}); 

Sie können die JsFiddle überprüfen here

Vielen Dank im Voraus!

Answer 1

Nicht wenige Updates hier:

• First off, Ihre Drop-Down außerhalb des Controllers befindet sich
• Sie könnten die ng-Optionen Richtlinie zu bereinigen Ihre Auswahlmenü
• Sie haben ng verwenden -Klicken Sie auf jede Option, die nicht gut mit dem komplexen Modell funktioniert, das Sie zu pflegen versuchen
• Wenn Sie die gesamte ausgewählte Option in den Filter übergeben, können Sie alles aus dieser einen Bereichsvariablen verwalten, die Daten an einem Ort
halten

Hier ist ein funktionierendes Beispiel http://jsfiddle.net/r0m4n/dLLtzqyr/1/

Dies wird Ihre vereinfacht html sein:

<div ng-controller="myCtrl"> 
    you have, {{money | currency: selectedCurrency}}... 
    <br> 
    <br> 
    <select ng-model="selectedCurrency" ng-options="item as item.label for item in exchange"> 
    </select> 
</div> 

Und Ihre js:

angular 
    .module('myApp', []) 
    // controller here 
    .controller('myCtrl', function($scope) { 
    $scope.money = 100; 
    $scope.exchange = [{ 
     label: "USD", 
     rate: 1 
    }, { 
     label: "£", 
     rate: 0.702846 
    }, { 
     label: "€", 
     rate: 0.885055 
    }]; 

    $scope.selectedCurrency = $scope.exchange[0]; 
    }) 

.filter('currency', function() { 
    return function(input, selectedCurrency) { 
    var out = ""; 

    out = input * selectedCurrency.rate; 

    return out + ' ' + selectedCurrency.label; 
    } 
}); 

Answer 2

Sie definieren 3 Parameter in Ihrer Filterwährung. Wenn Sie Ihren Filter verwenden, müssen Sie diese Parameter Ihrem Filter zuweisen. In Ihrem Fall:

<div ng-controller="myCtrl"> 
     you have, {{money | currency:currencySymbol:exchange[2].euro.rate}}...<br><br> 
</div> 

In AngularJS Welt, rufen Sie Ihre Filter nach den | und Sie : als Separator für Parameter (die erste Parametereingabe wird immer gegeben implizit).

die Debug einfacher zu machen, können Sie dies in Ihrem Filter hinzuzufügen:

return function(input, currencySymbol, currencyRate) { 
     console.info('currency parameter', input, currencySymbol, currencyRate); 

Bitte beachten Sie, dass ich den Parameter Currency fest einprogrammiert, weil es nicht praktisch, mit der Art und Weise Sie Ihr Array speichern abzurufen.