3

我有一个要传递给 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 个字段： 使用值和值的bindCurrencyModel。cur_isobindRateModelcur_rate_in_nis

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

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

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

   TypeError: Cannot read property 'cur_rate_in_nis' of undefined

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

查看我创建小提琴的所有代码....

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

谢谢！

4

4 回答 4

4

简短的版本如下：

将您的<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.bindCurrencyModel在函数内部进行设置$scope.setCurrency()，以便它与您感兴趣的字段相等。

于 2015-03-03T18:09:54.323 回答
1

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

首先，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]

希望你看到这个 jsfiddle比你原来的方法更整洁，更容易遵循。

于 2015-03-03T18:21:06.950 回答
0

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

于 2015-03-03T18:06:05.317 回答
0

更新您的 ng-options 以阅读：

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

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

于 2015-03-03T18:07:17.483 回答