0
anglejを使用して値を設定し、ドロップダウンを設定するにはどうすればよいですか？anglejsを使用して値を設定し、ドロップダウンを設定するにはどうすればよいですか？
両方のドロップダウンでオプションを正常にセットアップしました。私のドロップダウンで
1を更新このページは、私は全体のデータを移入する必要がある場合サリーと子の名前は、SallyChild2です私のデータベースの親の名前で別の
仮定に依存している この特定の親の名前を選択するとサリーと子 - - SallyChild2
ので、私は子供を変更したい - SallyChild1
SallyChild2
としてサリーとchildnameとして私のデータベース値は、親でありますだから私は、ハード、このワットとしてコード化されたが、
$scope.selectedParent="Sally";
$scope.selectedChild="SallyChild2";
を働いていない。しかしそのここ
作業私の完全なコードありませんこれは私の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": "George",
"childName": "George Child1"
},
{
"parentName": "Folly",
"childName": "FollyChild1"
},
{
"parentName": "Sally",
"childName": "Sally Child1"
},
{
"parentName": "George",
"childName": "GeorgChild2"
},
{
"parentName": "Folly",
"childName": "FollyChild2"
},
{
"parentName": "Folly",
"childName": "Infant Food"
},
{
"parentName": "Sally",
"childName": "SallyChild2"
}
];
$scope.selectedParent="Sally";
$scope.selectedChild="SallyChild2";
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>
いくつかのjsfiddleサンプルを追加できますか？ – MaKCbIMKo
あなたの質問はあまり明確ではありません。最初のドロップダウンに親の名前があり、2番目のドロップダウンに子の名前があるというシナリオですか？親のドロップダウンを変更する。選択した親の子ドロップダウンも変更する必要がありますか？そして、あなたが働くフィドルやプランナーを加えることができるなら、それは良いでしょう。 –
@Pratik Bhattacharyaはうまく動作します。これらのドロップダウンを更新すると問題が発生します。私のdbに親の名前はSallyで、子の名前はSallyChild2です。編集ボタンをクリックすると、ドロップダウンを親サリーと子ネームSallyChild2として表示したいと思います。私はこれで新しくなりました。私のコード全体をコピーしました。 –