AngularJS下拉（NG-选项）不具约束力 - 字符串对象（初始选择） [英] AngularJS drop down (ng- options) not binding - string to object (initial selection)

问题描述

我有一个问题，结合从服务器中检索到一个下拉列表中的数据。主要的问题，我认为是一个事实，即比较上不同的对象类型进行。

例如：
1.从服务器返回的对象包含货币code字符串。我们希望这是绑定到一个项目在下拉列表

 baseCurrency code：英镑
 

1. 视图模型返回的货币。这些返回货币列表具有不同特性的对象列表

   {\"currencies\":[{\"id\":1,\"rateId\":0,\"abbreviation\":\"AFN\",\"description\":\"Afghani\",\"rate\":0.0,\"rateDescription\":null,\"language$c$c\":\"en-gb\",\"isDefault\":true,\"fullDescription\":\"AFN - 阿富汗 - ，SHORTDESCRIPTION：AFN - 阿富汗}}

等。

目前，我已经写一个函数去通过每一个属性列表中的每个项目，发现要比较正确的财产得到了这个工作 - 做比较，然后返回初始选择

在叫我救的方法，然后我需要的货币缩写手动绑定到我想返回到服务器的对象。

当然，必须有一个更好的方式来做到这一点？

我的一些code，以供参考。

 ＆LT;选择NG模型=selectedCurrencyNG选项=currency.shortDescription在viewModel.currencies货币＆GT;＆LT; /选择＆GT;//调用我的自定义method..List，属性名，价值比较
$ scope.selectedCurrency = InitialiseDropdown（$ scope.viewModel.currencies，简称，$ scope.updatedObject.baseCurrency code）;以货币绑定到更新的对象 - 保存时执行// code
$ scope.updatedObject.baseCurrency code = $ scope.selectedCurrency.abbreviation;
 

任何帮助AP preciated！

的修改的
很抱歉，如果我是不够清楚..总之..

这里的主要问题是绑定到下拉和初始选择。

对象我们正在更新中包含货币缩写的参数（字符串）。

我们从选择列表是货币对象的列表。由于这是两个不同的对象类型，我已经无法在angulars 2路绑定堵塞，并写了一些code做这个初始检索和保存时。

要解决这一问题将是我们的检索返回的货币对象，而不是缩写的简单字符串的最彻底的方法，但是这是不是一种选择。

有没有实现2路不同的对象类型结合的更好的办法？

再次感谢

解决方案

这是不完全清楚的问题是什么，但你可以通过绑定＆LT保存自己的一些工作;选择＆GT; 当前选定的货币对象（所以你不必以后看它）。结果
选择 + ngOptions 让你绑定到一个值，而另一个显示，语法如下：

 ＆LT;选择NG模型=selectedCurrency
        NG-选项=货币作为currency.shortDescription
                    在viewModel.currencies货币＆GT;
＆LT; /选择＆GT;
 

在上面的例子中， $ scope.selectedCurrency 将被绑定到整个货币的对象，但 currency.shortDescription 将显示在下拉列表中。

---

又见这个 短演示

---

更新：

在情况下，你不需要绑定到整个货币对象，只是结合的 updatedObject baseCurrency code 属性来选择的（在下拉列表）货币的缩写，你可以做这样的：

 ＆LT;！ - 视图 - ＆GT;
＆LT;选择NG模型=updatedObject.baseCurrency code
        NG-选项=c.abbreviation为c.shortDescription
                    对于C中的货币＆GT;
＆LT; /选择＆GT;//在控制器
$ scope.currencies = [];
$ scope.updatedObject = {
    ...
    baseCurrency code：＆LT; baseCurrency codeFromServer＆GT;
};
 

---

又见了 短演示

I am having a problem binding data retrieved from the server to a drop down list. The main issue I think is the fact that the comparison is done on differing object types.

For example: 1. The object returned from the server contains a currency code string. we want this to be bound to an item in the dropdown list

"baseCurrencyCode":"GBP"

1. The view model returns the list of currencies.. These are returned as a list of currency objects with different properties

   {"currencies":[{"id":1,"rateId":0,"abbreviation":"AFN","description":"Afghani","rate":0.0,"rateDescription":null,"languageCode":"en-gb","isDefault":true,"fullDescription":"AFN - Afghani - ","shortDescription":"AFN - Afghani"}}

etc.

Currently, I have got this working by writing a function to go through every property for every item in the list, find the correct property we wish to compare to - do the comparison and then return the initial selection.

When calling my save method I then need to manually bind the currency abbreviation to the object I wish to return to the server.

Surely there must be a better way to do this?

Some of my code for reference..

<select ng-model="selectedCurrency" ng-options="currency.shortDescription for currency in viewModel.currencies"></select>

// Call to my custom method..List, PropertyName, value to compare 
$scope.selectedCurrency = InitialiseDropdown($scope.viewModel.currencies, "abbreviation", $scope.updatedObject.baseCurrencyCode);

// Code executed when saving - to bind the currency to the updated object
$scope.updatedObject.baseCurrencyCode = $scope.selectedCurrency.abbreviation;

Any help is appreciated!

EDIT Sorry if I wasn't clear enough.. To summarise..

The main problem here is binding to the drop down and initial selection.

The object we are updating contains a parameter (string) of the currency abbreviation.

The list we select from is a list of currency objects. As these are two differing object types I have been unable to plug in angulars 2 way binding and have written some code to do this on initial retrieval and when saving.

The cleanest way to fix this would be to return a currency object in our retrieval instead of a simple string of the abbreviation, but this is not an option.

Is there a better way of enabling 2 way binding on different object types ?

Thanks again

解决方案

It is not exactly clear what the problem is, but you can save yourself some work by binding the <select> to the currently selected currency object (so you don't have to look it up later).
select + ngOptions allow you to bind to one value while displaying another, with the following syntax:

<select ng-model="selectedCurrency"
        ng-options="currency as currency.shortDescription
                    for currency in viewModel.currencies">
</select>

In the above example, $scope.selectedCurrency will be bound to the whole currency object, but currency.shortDescription will be displayed in the dropdown.

---

See, also, this short demo.

---

UPDATE:

In case you don't need to bind to the whole currency object, but just bind updatedObject's baseCurrencyCode property to the abbreviation of the selected (in dropdown) currency, you can do it like this:

<!-- In the VIEW -->
<select ng-model="updatedObject.baseCurrencyCode"
        ng-options="c.abbreviation as c.shortDescription
                    for c in currencies">
</select>

// In the CONTROLLER
$scope.currencies = [...];
$scope.updatedObject = {
    ...
    baseCurrencyCode: <baseCurrencyCodeFromServer>
};

---

See, also, that short demo.

这篇关于AngularJS下拉（NG-选项）不具约束力 - 字符串对象（初始选择）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！