如何使用JavaScript和带有JSON数据的AngularJs在html页面中创建相关下拉列表。_Javascript_Html_Angularjs_Json

如何使用JavaScript和带有JSON数据的AngularJs在html页面中创建相关下拉列表。

javascript html angularjs json

如何使用JavaScript和带有JSON数据的AngularJs在html页面中创建相关下拉列表。,javascript,html,angularjs,json,Javascript,Html,Angularjs,Json,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"> <opti

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>


国家：
{{state.name}
地区:
{{地区名称}

假设JSON内容如下所示：

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

s2州的地区名称为： d2a、d2b、d2c、d2d……等等

州的地区名称为： d3a，d3b，d3c，d3d…等等…像这样

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

您可以这样做

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


你好
挑选
挑选

尝试下面的代码

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>

剩下的是如何删除重复状态。您可以将保留在一个单独的数组中，在该数组中删除重复项，或者使用所述的唯一筛选器


示例-示例过滤器生产
{{区.州}
{{地区.地区}

第一行有一个输入错误。它应该是

ng controller

。听起来您希望对区域执行某种过滤。试着在这里读更多：非常感谢你，兄弟@Iaktherock这是我真正想要的。（y）希望，我解决了你的问题：）谢谢你，麻烦了！！萨吉塔兰。你现在让我的工作变得很简单。如果有帮助的话，请记下答案

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