angularjs ng选项嵌套json数据 [英] angularjs ng-options nested json data

问题描述

我正在使用AngularJS作为我的网络应用程序。我的目标是使用 ng-options 两个下拉列表。

I am using AngularJS for my web app. My objective is to have two dropdowns list using ng-options.

• 第一个显示国家/地区列表的下拉列表


• 另一个给所选国家/地区的语言偏好设置

正在对AngularJS还是新手，我可以显示数据，但整个对象显示为一个选项，我无法分割每个数据。

Being still new to AngularJS, I am able to display the data but the entire object is displayed as a single option, I am unable to split each data.

请仔细查找代码

<select ng-model="selectedRegion" ng-options="region.countryName for region in eyebrow.regionSelector"></select>
<select ng-model="selectedRegion.selectLang" ng-options= "selectedRegion.selectLang for region in selectedRegion track by selectedRegion.countryName"></select>

JS：

JS:

angular.module ('appngOption')
.controller ('headerController', function($scope) {
$scope.eyebrow = { regionSelector: [
{
   "id": 1,
   "countryName": "Belgium",
   "selectLang": ["Dutch", "English", "French"]
},{
   "id": 2,
   "countryName": "France",
   "selectLang": ["English", "French"]
}]}
});

示例：荷兰语，英语和法语应为每个单独的下拉列表选项比利时被选中。
&选择法国时，英文和法文应为每个单独的下拉式选项。

Example: Dutch, English and French should be each separate dropdown option when Belgium is selected. & English and French should be each separate dropdown option when France is selected.

请仔细阅读代码，让我知道如果我错过了任何事情。

Kindly review the code and let me know if i had missed anything. Your help is deeply appreciated.

推荐答案

我在您的代码中修复了一些问题。

I fixed some issues in your code.

第一个输入是正确的：

<select ng-model="selectedRegion" ng-options="region.countryName for region in eyebrow.regionSelector"></select>

但在第二个，我改变了几件事：

But in the second, I changed several things:

• 将 ng-model 设置为不同的变量（ selectLang ），它是更清洁。


• ng-options 循环 selectedRegion.regionSelector ，而不是只需 selectedRegion 。这是你的主要错误：

• Set ng-model to a different variable (selectLang), it's cleaner.
• ng-options loops over selectedRegion.regionSelector, instead of just selectedRegion. That was your main mistake here:

<select ng-model="selectLang" ng-options="lang for lang in selectedRegion.selectLang"></select>

这篇关于angularjs ng选项嵌套json数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！