0
angularJSを使用してドロップダウンを設定する方法は？angularJSを使用してドロップダウンリストに値を入力する方法は？
両方のドロップダウンでオプションを正常にセットアップしました。私のドロップダウン一
は、私がクリックしたときに、私が保存された親の名前は、ロンドンと子の名前は、ロンドンSTATE2である私のデータベースにいると子供に
をcorreponding私のHTMLページに
を持っている別のすなわち親に依存していますこのコンテンツを編集するには、ドロップボックスのデータ全体に「London」という特定の親の名前を選択し、「London State2」の子の名前を入力する必要があります
コンテンツがドロップダウンで選択される唯一の事はメニュー..
すなわち。私はロンドンとして親の名前を選択したいと思います。子どもの名前はデフォルトでこのページを開くときにロンドンのState2です
私の問題は私がこのページを開くと、親の名前がデフォルトになります - 選択と子の名前は--Selectです -
これは私のscript.js
script.js
var app=angular.module('TestApp', ['angular.filter','ui.router']);
app.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('category',
{
views : {
"body" :
{
url : '/category',
templateUrl : 'category.html',
controller : 'TestController'
}
}
})
.state('category.subcategory',
{
url : '/subcategory',
views : {
"[email protected]" :
{
templateUrl : 'sample.html',
controller : 'SampleController'
}
}
})
});
app.controller('MainController', MainController);
function MainController($scope,$state)
{
alert("This is MainController")
$scope.getCategory=function()
{
$state.go('category');
}
}
app.controller('TestController', TestController);
//TestController.$inject['dataservice'];
function TestController($scope, $state){
$scope.data=[
{
"parentName": "India",
"childName": "India State1"
},
{
"parentName": "USA",
"childName": "USA State1"
},
{
"parentName": "London",
"childName": "London State1"
},
{
"parentName": "India",
"childName": "India State2"
},
{
"parentName": "USA",
"childName": "USA State2"
},
{
"parentName": "USA",
"childName": "USA State3"
},
{
"parentName": "London",
"childName": "London State2"
}
];
$scope.selectedParent="London";
$scope.selectedChild="London State2";
function onParentChange(parent){
if(!parent){
$scope.child = undefined;
}
}
$scope.getValue=function()
{
alert("Call to Sample Controller")
var currentState = $state.current.name;
var targetState = 'category.subcategory';
if(currentState === targetState)
$state.go($state.current, {}, {reload: true});
else
$state.go(targetState);
$state.go(".subcategory");
//$state.go('category.subcategory');
}
}
app.controller('SampleController', SampleController);
function SampleController($scope,$state)
{
alert("This is SampleController")
}
index.htmlを
<!DOCTYPE html>
<html ng-app="TestApp">
<head>
<link rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-route.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.8/angular-filter.js"></script>
<script src="angular-ui-router.js"></script>
<script src="script.js"></script>
<script src="angular-filter.js"></script>
</head>
<body ng-controller="MainController">
<a href="#" ng-click="getCategory()">Click to Category</a>
<div ui-view="body"></div>
</body>
</html>
category.html
<div>
<hr>
<div class="col-md-3">
<form>
<div class="form-group">
<label for="exampleSelect1"><b>Parent</b></label>
<select ng-model="selectedParent"
ng-init="selectedParent = null"
ng-change="onParentChange(selectedParent)"
class="form-control" id="data">
<option value="">--Select--</option>
<option ng-repeat="(key,value) in data | orderBy:'parentName'| groupBy:'parentName'">{{key}}</option>
</select>
</div>
</form>
</div>
<div class="col-md-3">
<form>
<div class="form-group">
<label for="exampleSelect1"><b>Child Names</b></label>
<select class="form-control" id="childnames" ng-model="child"
ng-disabled="!selectedParent"
ng-options="data.childName for data in data| filter: {parentName:selectedParent} | removeWith:{childName : 'Infant Food'}" ng-change="getValue()">
<option value="">--Select--</option>
</select>
</div>
</form>
</div>
<div ui-view="subbody"></div>
</div>
sample.html
あなたはロンドンがダウンあなたのドロップで、デフォルト値である必要がありますしたいあなたの例から<div>
Sample Controller
</div>
ロンドンのデフォルトの初期値である – Hmahwish