angularjs ng-选项嵌套 json 数据

Question

我正在为我的网络应用程序使用 AngularJS。我的 objective 是使用 ng-options.

有两个下拉列表

显示国家/地区列表的第一个下拉列表
另一个给出所选国家/地区的语言首选项

作为 AngularJS 的新手，我可以显示数据，但整个对象显示为一个选项，我无法拆分每个数据。

请在下面找到我使用的代码。

HTML

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

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"]
  }]}
});

示例：选择比利时时，荷兰语、英语和法语应分别作为单独的下拉选项。 & English and French should be each separate dropdown option when France is selected.

请检查代码，如果我遗漏了什么请告诉我。非常感谢您的帮助。

Answer 1

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

JSFiddle demo

第一次输入正确：

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

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

将 ng-model 设置为不同的变量 (selectLang)，它更干净。
ng-options 遍历 selectedRegion.regionSelector，而不仅仅是 selectedRegion。这是你的主要错误：

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

angularjs ng-选项嵌套 json 数据

angularjs ng-options nested json data

javascript

angularjs

json

drop-down-menu

ng-options

HTML

JS:

JSFiddle demo