Question

我正在构建一个应用程序，其中项目的价格应以不同的货币显示。对于购物车，我使用角度指令NgCart，我需要传递每个项目的数量和价格。该指令具有隔离范围，因此我不能使用过滤器来切换货币，而是直接从范围传递不同的价格。我只能从指令内的一个范围传递数据（来自[HKEY_LOCAL_MACHINE\SYSTEM\ControlSet001\Control\Class\{4D36E972-E325-11CE-BFC1-08002BE10318}\0021] "NewDeviceInstall"=dword:00000001 "NetCfgInstanceId"="{F63BF017-1532-4476-A7AB-C0AB756A4EE7}" "*IfType"=dword:00000006 "Characteristics"=dword:00000081 "NetLuidIndex"=dword:00000014 "DeviceInstanceID"="ROOT\\NET\\0001" "InstallTimeStamp"=hex:e0,07,04,00,04,00,1c,00,0e,00,2d,00,24,00,50,00 "Manufacturer"="TAP-Win32 Provider OAS" "ProductName"="TAP-Win32 Adapter OAS" "ComponentId"="tapoas" "AllowNonAdmin"="1" "MediaStatus"="0" "MTU"="1500" "InfPath"="oem44.inf" "InfSection"="tapoas.ndi" "ProviderName"="TAP-Win32 Provider OAS" "DriverDateData"=hex:00,00,0b,41,53,df,ca,01 "DriverDate"="4-19-2010" "DriverVersion"="9.0.0.7" "MatchingDeviceId"="tapoas" "DriverDesc"="TAP-Win32 Adapter OAS" [HKEY_LOCAL_MACHINE\SYSTEM\ControlSet001\Control\Class\{4D36E972-E325-11CE-BFC1-08002BE10318}\0021\Ndi\params\MTU] "ParamDesc"="MTU" "Type"="int" "Default"="1500" "Optional"="0" "Min"="100" "Max"="1500" "Step"="1"的数据）。

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

name in names

我的控制员：

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

你可以看到一个有效的JSfiddle here提前致谢！

编辑：使用ng-cart指令更新了plunker，剩下的问题是使用Iulian提供的解决方案，我无法传递货币符号，因此我无法显示正确的单元。

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": "€"}
 ]

AngularJS - 使用输入选项改变表达式

2 个答案: