AngularJS - 通过输入选项改变表达方式

Question

我正在构建应用程序，其中的项目价格应以不同货币显示。对于购物车，我使用的是角度指令，NgCart，我需要传递每件商品的数量和价格。该指令具有隔离范围，因此我无法使用过滤器来切换货币，而是直接从范围中传递不同的价格。我只是可以传递指令中的一个范围的数据（来自name in names的数据）。

我想要做的是，当在输入选项元素中选择相应的选项时，显示的价格会发生变化，并且通过切换它，传递给指令的价格也会发生变化（到所选货币） 。我一直试图用ng-options来实现它，但有些东西不起作用。我的HTML是这样的：

<div ng-controller="myCtrl" ng-app="myApp"> 
    <select ng-options="price.currency for price in names" ng-model="currency"></select> 
    <div ng-repeat="name in names"> 
    The price of {{name.toy}} is {{name.price[0].amount}} {{name.price[0].symb}} 
    <ngcart-addtocart name="{{name.toy}}" price="{{name.price[0].priceUSD}}"> 
     <p1>Add to Cart</p1> 
    </ngcart-addtocart> 
    <br> 
    <br> 
    </div> 
</div> 

而且我的控制器：

var app = angular.module('myApp', []); 
app.controller('myCtrl', function($scope) { 
    $scope.names = [{ 
     "toy": "Buzz Lightyear", 
     "price": [ 
      {"currency":"usd","amount":199,"symb": "$"}, 
      {"currency":"eur","amount": 179,"symb": "€"} 
     ] 
    }, 
    { 
     "toy": "Woody", 
     "price": [ 
      {"currency":"usd","amount":179,"symb": "$"}, 
      {"currency":"eur","amount": 169,"symb": "€"} 
     ] 
    }]; 
}); 

你可以看到一个工作的jsfiddle提前here谢谢！

编辑：更新plunker与NG-车指令，剩下的问题是，与由尤利安提供的解决方案，我无法通过货币符号，因此我不能显示正确的单元。

Answer 1

您的代码有几个问题。

1.首先，您使用 ngOptions是不正确的。您使用 for price in names，并因此从您的名称中获取每个对象的 price，这是 {"toy": ..., "price": []}对象。相反，我会建议你创建另一个变量，将持有的可用货币，例如：

$scope.currencies = [ 
    {currency: 'usd', symb: '$'}, 
    {currency: 'eur', symb: '€'} 
]; 

2.您将无法获得更新的价格在你的指令，因为你总是被传递给它的第一个元素的价格： price="{{name.price[0].priceUSD}}"。相反，您需要根据所选货币动态获取它。对于这一点，你可以创建类似下面的一个功能，那会回报你给出的货币价格：

$scope.getPriceInCurrency = function (item, currency) { 
    var priceInCurrency = 0; 
    item.price.forEach(function(price) { 
    if (price.symb === currency) { 
     priceInCurrency = price.amount; 
    } 
    }); 
    return priceInCurrency; 
}; 

现在，当你显示的选项和要显示相应的价格，从上面使用的功能获得它：

The price of {{name.toy}} is {{getPriceInCurrency(name, currency)}} {{currency}} 

又路过你的价值观的ngcartAddtocart指令时，这些都在这里不需要你可以省略{{}}括号。

这是您的小提琴的fork与一个工作示例。

祝你好运！

Answer 2

由于名称是一个数组对象，因此无论名称[0]还是名称[1]，都会感到困惑。

<select ng-options="item.currency for item in names[1].price" ng-model="curr"></select> 

因此，如果您为货币查找创建单独的数组，那么问题就解决了。

<select ng-options="item as item.currency for item in currencyLookup" ng-model="selected"></select> 
$scope.currencyLookup=[ 
{"currency":"usd","symb": "$"}, 
{"currency":"eur","symb": "€"} 
]