如何使用带有 JSON 数据的 JavaScript 和 AngularJs 在 html 页面中创建依赖下拉列表。 [复制]答案

【问题标题】：How to create dependent drop-down lists in html page using JavaScript and AngularJs with JSON data. [duplicate]如何使用带有 JSON 数据的 JavaScript 和 AngularJs 在 html 页面中创建依赖下拉列表。 [复制]
【发布时间】：2017-07-15 05:52:41
【问题描述】：

HTML 代码，可能不正确：

<div ng-app="myApp" ng=controller="myCtrl">
States : <select id="source" name="source">
     <option>{{state.name}}</option>
      </select>

Districts: <select id="status" name="status">
    <option>{{district.name}}</option>
    </select>

假设 JSON 内容如下：

州名： s1、s2、s3、s4……等等。州 s1 中的地区名称为： d1a,d1b,d1c,d1d...等等

状态 s2 中的地区名称是： d2a,d2b,d2c,d2d...等等

州 s 中的地区名称是： d3a,d3b,d3c,d3d...等等...像这样。

我希望当用户点击州下拉菜单时，另一个下拉菜单应显示相应的地区名称。

【问题讨论】：

您在第一行有错字。应该是ng-controller。
听起来您希望对地区执行某种过滤。尝试在这里阅读更多内容：docs.angularjs.org/api/ng/filter/filter

标签： javascript html angularjs json

【解决方案1】：

你可以这样做，

<body ng-controller="SelectorCtrl">
  <h1>Hello Plunker!</h1>
  <select class="form-control" id="state" ng-model="divisionsSource" ng-options="stateName as stateName.State for stateName in data ">
    <option value=''>Select</option>
  </select>
  <select class="form-control" id="district" ng-model="workplacesSource" ng-disabled="!divisionsSource" ng-options="division as division.districtName for division in divisionsSource.Districts ">
    <option value=''>Select</option>
  </select>
</body>

演示

angular.module('app', []).controller('SelectorCtrl', function($scope) {
  $scope.data = [{
    "State": "S1",
    "Districts": [{
      "districtName": "D1"
    }, {
      "districtName": "D2"
    }, {
      "districtName": "D3"
    }]
  }, {
    "State": "S2"
  }];
});

<!DOCTYPE html>
<html ng-app="app">
<head>
  <script data-require="angular.js@1.4.3" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>
<body ng-controller="SelectorCtrl">
  <h1>Hello!</h1>
  <select class="form-control" id="state" ng-model="divisionsSource" ng-options="stateName as stateName.State for stateName in data ">
    <option value=''>Select</option>
  </select>
  <select class="form-control" id="district" ng-model="workplacesSource" ng-disabled="!divisionsSource" ng-options="division as division.districtName for division in divisionsSource.Districts ">
    <option value=''>Select</option>
  </select>
</body>
</html>

【讨论】：

非常感谢！萨吉塔兰。你现在让我的工作变得非常简单。
如果有帮助则标记为答案

【解决方案2】：

试试下面的代码。

index.html

<div data-ng-app="myApp" data-ng-controller="StateController as stateCtrl">

    States :
    <select id="source" name="source" data-ng-model="dataState" data-ng-options="state.id as state.name for state in states" data-ng-change="stateCtrl.changeState(dataState)">
        <option value="">Select State</option>>
    </select>

    Districts:
    <select id="status" name="status" data-ng-options="district.id as district.name for district in districts">
        <option>{{district.name}}</option>
    </select>
</div>

app.js

var state = angular.module("myApp", []);

state.controller('StateController', ['$window', '$scope', function($window, $scope) {
    $scope.states = [{id: 1, name: 's1'}, {id: 1, name: 's2'}, {id: 1, name: 's3'}]; $scope.districts = {};

    this.changeState = function(id) {
        //Add whatever condition u need. Below code is a hard coded way. I recommend using ajax request to fetch district results based on states
        if (id === 1) {
            $scope.districts = [{id: 1, name: 'd1'}, {id: 1, name: 'd2'}, {id: 1, name: 'd3'}]; 
        } else if (id === 2) {
            $scope.districts = [{id: 1, name: 'd4'}, {id: 1, name: 'd5'}, {id: 1, name: 'd6'}];
        }
    }
}]);

【讨论】：

非常感谢兄弟！！ @Iaktherock，这就是我真正想要的。 (y)
希望，我解决了你的问题 :)

【解决方案3】：

剩下的是如何删除重复的状态。您可以将其保存在单独的数组中，删除重复项，或使用here 所述的唯一过滤器

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-filter-filter-production</title>
  <script src="//code.angularjs.org/snapshot/angular.min.js"></script>
</head>
<body ng-app="">
  <div ng-init="districts = [{state:'State 1', district:'District 1'},
                             {state:'State 1', district:'District 2'},
                             {state:'State 1', district:'District 3'},
                             {state:'State 2', district:'District 4'},
                             {state:'State 2', district:'District 5'},
                             {state:'State 3', district:'District 6'}]"></div>

<select ng-model="search.state">
  <option></option>
  <option ng-repeat="district in districts">{{district.state}}</option>
</select>
<select>
  <option ng-repeat="district in districts | filter:search:strict">{{district.district}}</option>
</select>
</body>
</html>

【讨论】：