如何设置值并使用angularjs填充下拉列表?
我已在两个下拉列表中成功设置了该选项。
在我的下拉列表中,一个依赖于另一个
假设在我的数据库中父名是Sally而子名是SallyChild2,当更新此页面时,我需要填充整个数据 选择此特定父名称为Sally,子名称为SallyChild2
我的数据库值为Parent - Sally and Child - SallyChild2
所以我想改变Child - SallyChild1
所以我硬编码为这个wat但没有工作
$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 : {
"subbody@category" :
{
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>
答案 0 :(得分:0)
你真正拥有的是一系列孩子。因此,您可以设置<select>
标记,如下所示:
<select ng-model="selectedChild" ng-options="child as child.childName for child in children"></select>
现在,您的selectedChild
模型包含父名称和子名称。您不需要将模型分成两部分。
第二部分,为了设置初始值,您需要对您的SallyChild2目标使用angular.equals()
。像这样:
var target = {
"parentName": "Sally",
"childName": "SallyChild2"
};
for(var i = 0; i < $scope.children.length; ++i) {
if(angular.equals($scope.children[i], target)) {
$scope.children[i] = target;
$scope.selectedChild = $scope.children[i];
}
}
这是一个有效的Plunker:http://plnkr.co/edit/60ajq6KBmUKXuPeT6yI2?p=preview
要使用两个选择下拉列表执行此操作,只需执行以下操作:
//parents dropdown
<select ng-model="selectedParent" ng-options="parent as parent.parentName for parent in data | unique: 'parentName'"></select>
//children dropdown
<select ng-model="selectedChild" ng-options="child as child.childName for child in getChildren(selectedParent)"></select>
<强>使用Javascript:强>
$scope.getChildren = function(parent) {
var children = [];
for(var i = 0; i < $scope.data.length; ++) {
if($scope.data[i].parentName === parent {
children.push($scope.data[i]);
}
}
return children;
}