0
Как установить значение и заполнить выпадающее меню с помощью angularjs?Как установить значение и заполнить выпадающее меню с помощью angularjs?
Я успешно установил эту опцию в обоих выпадающих меню.
В моем раскрывающемся списке один зависит к другому
Предположим, что на мое имя Parent базы данных Салли и имя ребенок SallyChild2, когда обновление этой страницы, мне нужно заполнить все данные с выбора данного конкретного родительского имени а Салли и ChildName как SallyChild2
Моей ценность базы данных родитель - Салли и ребенок - SallyChild2
так я хочу, чтобы изменить ребенок - SallyChild1
Поэтому я жестко, как это ват, но не работает
$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
Ваш вопрос не очень ясен. Является ли ваш сценарий, что в первом выпадающем списке должно быть имя родителя, а во втором выпадающем списке будут имена детей.Об изменении родительского раскрывающегося списка; выпадающий список детей также должен измениться для выбранного родителя? И было бы хорошо, если бы вы могли добавить какую-нибудь рабочую скрипку или plunkr. –
@Pratik Bhattacharya работает нормально, когда обновление выпадающего списка получило проблему. Предположим, что в моем db родительское имя Sally, а дочернее имя SallyChild2. Когда нажимается кнопка редактирования, я хочу показать выпадающее меню как родительское имя Sally и дочернее имя SallyChild2.Пожалуйста, помогите мне. Я новичок в этом. Я скопировал весь мой код –