通过 json 文件中的 Angular 填充相关选择

Question

我有一个 JSON 具有下一个结构的文件

  {
  "regions": [
    "Africa",
    "The Americas",
    "Asia",
    "Europe",
    "Middle East"
  ],
  "countries": {
    "Africa": [
      "Algeria",
      "Egypt",
      "Morocco",
      "South Africa",
      "Tunisia",
      "Other African Countries"
    ],
    "Asia": [
      "China",
      "Japan",
      "Other Asian Countries"
    ],
    "Europe": [
      "Austria",
      "Baltic States - Lithuania, Latvia, Estonia",
      "Belgium",
      "Bulgaria",
      "Croatia",
      "Czech Republic",
      "Denmark",
      "Finland",
      "France",
      "Germany",
      "Greece",
      "Hungary",
      "Iceland",
      "Ireland",
      "Italy",
      "Luxemburg",
      "Netherlands",
      "Norway",
      "Poland",
      "Portugal",
      "Romania",
      "Russia",
      "Slovakia",
      "Slovenia",
      "Spain",
      "Sweden",
      "Switzerland",
      "Ukraine",
      "United Kingdom",
      "Other European Countries"
    ],
    "Middle East": [
      "Afghanistan",
      "Armenia",
      "Azerbaidjan",
      "Bahrain",
      "Georgia",
      "Iran",
      "Iraq",
      "Israel",
      "Jordan",
      "Kazakhstan",
      "Kuwait",
      "Kyrgyzstan",
      "Lebanon",
      "Mongolia",
      "Oman",
      "Qatar",
      "Saudi Arabia",
      "Tadzhikistan",
      "Turkey",
      "United Arab Emirates",
      "Uzbekistan",
      "Yemen",
      "Other Middle-East Countries"
    ]
  }

我需要创建两个依赖 select。首先 - 我选择区域，然后根据区域 - 选择 selected 国家。

HTML

<html lang="en" ng-app="myapp">
<head>
    <link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body>   
<div ng-controller="myCtrl">

    <select ng-model="selectedRegion" data-ng-options="location for location in selected.regions">
        <option value="">Region</option>
    </select>
    <select ng-model="selectedCountry" ng-options="place for place in selected.countries.selectedRegion">
        <option value="">Country</option>
    </select>

</div>

</body>
</html>

控制器

angular.module('myApp').controller('myCtrl', function($http, $scope) {
  $http.get('contacts.json').success(function (data) {
     $scope.select = data;
  });
});

第二个 select 不起作用。请帮忙。谢谢。这是 plunker - http://plnkr.co/edit/1AZNUyiRJclF7cdFOLjA?p=preview

Answer 1

您需要为国家/地区内的区域添加属性，因为它是可变的，请使用 [] 表示法：

<select data-ng-options="place for place in selected.countries[selectedRegion]" ng-model="..">

DEMO

通过 json 文件中的 Angular 填充相关选择

Populate dependent selects via Angular from json file

javascript

select

json

angularjs

ng-options