使用 angularjs ng-options 和 ng-change 时发送选项对象

Question

我有一个要传递给 ng-options 的对象数组，该数组包含下一个模式中的货币对象：

[{
        "cur_iso": "ILS",
            "cur_symbol": "\u20aa",
            "cur_name_he": "\u05e9\u05e7\u05dc",
            "cur_rate_in_nis": "1.0000",
    }, {
        "cur_iso": "USD",
            "cur_symbol": "$",
            "cur_name_he": "\u05d3\u05d5\u05dc\u05e8",
            "cur_rate_in_nis": "3.8580"
    }]

我正在使用 ng-options 从这个数组中创建一个 select。

<select ng-model="bindCurrencyModel" ng-init="bindCurrencyModel='ILS'" 
ng-options="currency.cur_iso as currency.cur_symbol+' '+currency.cur_name_he for currency in currencies track by currency.cur_iso" 
                    ng-change="setCurrency(currency)">
</select>

当用户更改 selection 时，我想更新 2 个字段： bindCurrencyModel 与 cur_iso 值和 bindRateModel 与 cur_rate_in_nis值.

所以我创建了下一个方法：

            $scope.setCurrency=function(currency){
                $scope.bindRateModel=parseFloat(currency.cur_rate_in_nis);
            };

the 并设置 ng-change="setCurrency(currency)" 但问题是我得到：

   TypeError: Cannot read property 'cur_rate_in_nis' of undefined

另一个奇怪的行为是我在 select.

开头得到的空行

查看我创建的所有代码 fiddle...

http://jsfiddle.net/d9esbgjf/5/

谢谢！

Answer 1

我相信您的 setCurrency() 方法将无法访问 currency，只能访问通常的范围变量。在这种情况下，可以使用 bindCurrencyModel 变量。

Answer 2

将您的 ng-options 更新为：

ng-options="currency as currency.cur_symbol+' '+currency.cur_name_he for currency in currencies track by currency.cur_iso"

这将使用您在 setCurrency 函数中期望的完整对象填充您的模型。

Answer 3

简版如下：

将您的 <select> 标记更改为以下内容：

<select ng-model="selectedCurrency" ng-init="selectedCurrency=currencies[0]" 
    ng-options="currency as currency.cur_symbol+' '+currency.cur_name_he for currency in currencies track by currency.cur_iso" 
    ng-change="setCurrency(selectedCurrency)">
</select>

将您的 $scope.setCurrency() 方法更改为以下内容：

$scope.setCurrency = function (currency) {
    $scope.bindRateModel = parseFloat(currency.cur_rate_in_nis);
    $scope.bindCurrencyModel = currency.cur_iso;
};

为什么这样做有效？

第一个区别是我将整个 currency 对象绑定到一个新的 selectedCurrency 范围属性。这使您可以访问整个对象，而不仅仅是 cur_iso 属性。这样您就不必查看 currencies 数组来找到完整的对象。

然后我更改了 ng-change 表达式，使用它绑定到的范围属性将整个对象传递给 $scope.setCurrency。这允许该方法访问完整对象。

最后，您需要在 $scope.setCurrency() 函数中设置 $scope.bindCurrencyModel，这样它就等于您感兴趣的字段。

Answer 4

你在这里做了一些奇怪的事情，我认为你可以简化很多。

首先，setCurrency(currency) 将根据范围进行评估。由于您从未在范围内定义字段 currency，因此它始终是未定义的。

您使用了很多额外的变量来引用您可以直接引用的属性。清理它会让你的生活更简单。

考虑以下方法，而不是您的方法：

<select
  ng-model="selectedCurrency"
  ng-options="currency as currency.cur_symbol + ' '
              + currency.cur_name_he for currency in currencies">

我们删除了 ng-change 并使 selectedCurrency 成为模型，它引用整个货币对象而不仅仅是 ISO 符号。

现在你可以这样做了：

<input type="number" 
       ng-model="selectedCurrency.cur_rate_in_nis">

和 {{selectedCurrency.cur_iso}} 例如 ISO 代码。

最后删除 select 开头的空行，初始化值.. 例如：

$scope.currencies = [{
    "cur_iso": "ILS",
        "cur_symbol": "\u20aa",
        "cur_name_he": "\u05e9\u05e7\u05dc",
        "cur_rate_in_nis": 1.0000,
        "cur_last_update": "",
        "cur_order": "1",
        "cur_available": "1"
}, {
    "cur_iso": "USD",
        "cur_symbol": "$",
        "cur_name_he": "\u05d3\u05d5\u05dc\u05e8",
        "cur_rate_in_nis": 3.8580,
        "cur_last_update": "2015-02-24 13:34:25",
        "cur_order": "2",
        "cur_available": "1"
}];
// Initialise value so select is initially selected on something.
$scope.selectedCurrency = $scope.currencies[0]

希望您看到 this jsfiddle 比您原来的方法更简洁、更容易遵循。

使用 angularjs ng-options 和 ng-change 时发送选项对象

send the option object when using angularjs ng-options and ng-change

angularjs

ng-options

angularjs-ng-change

为什么这样做有效？