JSONデータでJavaScriptとAngularJsを使用してhtmlページに依存ドロップダウンリストを作成する方法。正しくない可能性があり

HTMLコード、：JSONデータでJavaScriptとAngularJsを使用して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において、地区名は以下のとおりです。状態S2で D1A、D1B、D1C、D1D ...というように

地区名は以下のとおりです。 D2A、D2B、D2C、D2D ...とそう

に

州の地区名は： d3a、d3b、d3c、d3d ...などです。

ユーザーが州のドロップダウンをクリックすると、もう1つのドロップダウンには該当する地区名が表示されます。

出典

2017-07-15 Abhishek Kumar

を説明するように、あなたが最初の行にタイプミスをした重複が削除され、別の配列に保つ、あるいは独自のフィルターを使用することができます。これは 'ng-controller 'でなければなりません。 – Nisarg

あなたは、地区で何らかのフィルタリングをしたいと思うようです。詳細はこちらをご覧ください：https://docs.angularjs.org/api/ng/filter/filter –

あなたはこのような何かを行うことができ、

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

DEMO

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="[email protected]" 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>

出典

2017-07-15 06:23:18 Sajeetharan

ありがとうございました！ Sajeetharan。あなたは私の仕事をとてもシンプルにしました。 –

助けあれば答えは – Sajeetharan

は、以下のこのコードを試してみてください。

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

出典

2017-07-15 06:24:26 laktherock

ありがとう兄様！ @ Iaktherock、これは私が実際に望んだものです。（y） –

希望、私はあなたの問題を解決しました:) – laktherock

何残っていることは、重複状態を削除する方法です。 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>

出典

2017-07-15 06:25:27

JSONデータでJavaScriptとAngularJsを使用してhtmlページに依存ドロップダウンリストを作成する方法。正しくない可能性があり

答えて

関連する問題