我的html中有一个本地$ scope.countries，我填写国家/地区州城市，但是我不需要在下拉列表中选择默认值，而是需要显示来自后端的国家/地区州城市值作为默认值。例如，Afganistan ，Badhakshan。
Plunker代码在这里。 http://plnkr.co/edit/DPoOFRKGXO28tDXzGe5B?p=preview
<html lang="en-US">
<head>
<meta charset="utf-8">
<link href="css/custom.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
</head>
<body ng-controller="MainCtrl">
<form action="#" role="form" class="form-horizontal" id="location" method="post" accept-charset="utf-8">
<div class="form-group">
<div class="col-sm-4">
<select name="country" ng-model="model.country" class="form-control countries" id="countryId" required="required">
<option value="">Select Country</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-sm-4">
<select name="state" ng-model="model.state" class="form-control states" id="stateId" required="required">
<option value="">Select State</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-sm-4">
<select name="city" ng-model="model.city" class="form-control cities" id="cityId" required="required">
<option value="">Select City</option>
</select>
</div>
</div>
</form>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="app.js"></script>
<script src="location.js"></script>
</body>
</html>
JS：
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
var response = {
"response":
{"json":
{"session_id":"498",
"profile":{"country":"Afghanistan",
"state":"Badakhshan","city":"Eshkashem",
"pincode":"54564",
"rolemandatory":1},
"roles":[]}}}
$scope.getProfile = function () {
$scope.model.country = response.response.json.profile.country;
$scope.model.state = response.response.json.profile.state;
$scope.model.city = response.response.json.profile.city;
};
});
答案 0 :(得分：2)
多级下拉列表的示例代码。有很多方法可以实现这一目标。
function myCtrl($scope) {
$scope.selectedDist = {};
$scope.selectedThana = {};
$scope.districts = [
{id: 1, name: 'Delhi'},
{id: 2, name: 'Mumbai'},
{id: 3, name: 'Chennai'}
];
$scope.thanas = [
{id: 1, name: 'Mirpur', dId: 1},
{id: 2, name: 'Uttra', dId: 1},
{id: 3, name: 'Shahabag', dId: 1},
{id: 4, name: 'Kotalipara', dId: 2},
{id: 5, name: 'Kashiani', dId: 2},
{id: 6, name: 'Moksedpur', dId: 2},
{id: 7, name: 'Vanga', dId: 3},
{id: 8, name: 'faridpur', dId: 3}
];
$scope.localeList = [
{id: 1, name: 'Ulhasnagar', tId: 1},
{id: 2, name: 'Ambarnath', tId: 1},
{id: 3, name: 'Kalyan', tId: 5},
{id: 4, name: 'Vithalvadi', tId: 2},
{id: 5, name: 'Vikhroli', tId: 6},
{id: 6, name: 'Kanjurmarg', tId: 2},
{id: 7, name: 'Ghatkopar', tId: 3},
{id: 8, name: 'Kamlakar nagar', tId: 3},
{id: 9, name: 'Kolsewadi', tId: 4},
{id: 10, name: 'Fort', tId: 7},
{id: 11, name: 'Gudgava', tId: 8},
{id: 12, name: 'Mayur Vihar', tId: 8},
{id: 13, name: 'Chinchpokli', tId: 6}
];
$scope.filterThana = function (thana) {
return (thana.dId === $scope.selectedDist.id);
};
$scope.filterLocale = function (locale) {
return (locale.tId === $scope.selectedThana.id);
};
}<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<div ng-app ng-controller="myCtrl">
<div class="col-xs-6">
<form class="form-horizontal" name="testForm">
<div class="form-group">
<div class="col-md-3"><label><i class="fa fa-question-circle fa-fw"></i> District List</label></div>
<div class="col-md-4">
<select class="form-control" name="dist" required ng-model="selectedDist" ng-options="district.name for district in districts">
<option value="">Select</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-md-3"><label><i class="fa fa-question-circle fa-fw"></i> Thana List</label></div>
<div class="col-md-4">
<select class="form-control" name="thana" required ng-model="selectedThana" ng-options="thana.name for thana in thanas | filter: filterThana">
<option value="">Select</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-md-3"><label><i class="fa fa-question-circle fa-fw"></i> Locale List</label></div>
<div class="col-md-4">
<select class="form-control" name="local" required ng-model="selectedLocale" ng-options="locale.name for locale in localeList | filter: filterLocale">
<option value="">Select</option>
</select>
</div>
</div>
</form>
</div>
</div>
答案 1 :(得分：1)
你所写的内容是正确的。在上面的代码中我发现了一些错误，
1.您未在{html
中加入angular
2.您未设置model.country model.state和model.city值
3.使用ng-options选择框以选择框，并使用$http
4.即使您在完成该功能后使用jquery生成选项，也请使用$("#countryId").val(your default value);更新选择框
以下是有用的链接
答案 2 :(得分：0)
我建议你为你的数据创建一个API ..然后只查询它并在你的视图中显示它们..在你的控制器中有一个find（）函数来查询你的API并获得值.Call ng-init = find（ ）在html视图中..