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

当用户更改选择时，我想更新2个字段：带有 cur_iso 值的 bindCurrencyModel ，带有 bindRateModel 的 cur_rate_in_nis 值。

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

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

并设置ng-change =＆＃34; setCurrency（currency）＆＃34;但问题是我得到了：

   TypeError: Cannot read property 'cur_rate_in_nis' of undefined

另一个奇怪的行为是我在选择开始时得到的空行。

看到我创造了一个小提琴的所有代码......

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

谢谢！

Answer 1

简短版本如下：

将您的<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属性将整个对象传递给$scope.setCurrency。这允许该方法访问完整对象。

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

Answer 2

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

首先，将根据范围评估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代码。

最后要删除选择开头的空白行，请初始化值..例如：

$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比原始方法更简洁，更容易理解。

Answer 3

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

Answer 4

将ng-options更新为：

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

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

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

4 个答案:

为什么这样做？