AngularJS - 带外部输出的货币兑换过滤器

Question

我正在尝试建立一个基于this post的过滤器。我希望能够通过切换选择输入来切换一种货币到另一种货币，但是我无法将输入输入到过滤器中。

我的HTML是：

<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> 

和角部分：

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; 
     } 
}); 

您可以检查的jsfiddle here

提前感谢！

Answer 1

不少新闻点击这里：

• 首先，你的下拉列表位于在控制器外部
• 你可以使用NG选项指令来清理你的选择菜单
• 你有NG - 单击每个选项，这对于您试图维护的复杂模型不起作用
• 如果将整个选定选项传递给过滤器，则可以管理该范围变量中保存数据的所有内容

这里是一个工作示例 http://jsfiddle.net/r0m4n/dLLtzqyr/1/

这将是你简化HTML：

<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> 

而且你的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

您以过滤器货币定义3个参数。无论何时使用过滤器，都需要将这些参数提供给过滤器。你的情况：

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

在AngularJS的世界里，你叫|后您的过滤器，并使用:作为参数的分隔符（第一个参数输入总是含蓄地给出）。

为了使调试更容易，你可以在你的过滤器添加此：

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

请注意，我硬编码参数currencyRate因为它不是很方便检索与您存储阵列的方式。