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

我试图建立一个过滤器的基础上。我希望能够通过在选择输入上点击ng来从一种货币切换到另一种货币，但我无法将输入输入输入到过滤器中

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

您可以检查JSFIDLE

---

提前谢谢

您可以用筛选货币定义3个参数。无论何时使用过滤器，都需要为过滤器提供这些参数。就你而言：

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

---

请注意，我硬编码了参数currencyRate，因为用存储阵列的方式检索它并不方便。

这里有很多更新：

• 首先，您的下拉列表位于控制器外部
• 您可以使用ng options指令来清理选择菜单
• 如果您试图维护的复杂模型不能很好地使用，请单击每个选项
• 如果将整个选定选项传递到过滤器中，则可以管理从一个范围变量到将数据保留在一个位置的所有内容

下面是一个工作示例

这将是您的简化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>

---

朴素典雅。万分感谢！

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

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

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