【发布时间】：2018-08-21 03:45:44
【问题描述】：
我有一个带有返回 JSON 对象的表单，其中包含一组国家/地区及其州/省和城市。我正在使用 AngularJS 1.6.x 设置表单，并且需要根据其父值选择多个字段。
(function() {
var app = angular.module('AddressApp', []);
app.controller('AddressController', function($scope) {
$scope.countries = [{
"name": "US",
"label": "United States",
"state_province": [{
"name": "WA",
"label": "Washington",
"city": [{
"name": "Seattle"
},
{
"name": "Tocoma"
}
]
},
{
"name": "OR",
"label": "Oregon",
"city": [{
"name": "Portland"
}]
}
]
}, {
"name": "CA",
"label": "Canada",
"state_province": [{
"name": "BC",
"label": "British Columbia",
"city": [{
"name": "Vancouver"
},
{
"name": "Victoria"
}
]
},
{
"name": "AB",
"label": "Alberta",
"city": [{
"name": "Calgary"
},
{
"name": "Edmonton"
}
]
}
]
}];
// Code to preselect fields
$scope.user = {};
$scope.user.country = "US";
$scope.user.stateProvince = "WA";
$scope.user.city = "Seattle";
if ($scope.user.country !== undefined && $scope.user.country != "") {
for (var countryIndex = 0; countryIndex < $scope.countries.length; countryIndex++) {
var country = $scope.countries[countryIndex];
if (country.name == $scope.user.country) {
$scope.selectedCountry = country;
break;
}
}
}
if ($scope.user.stateProvince != undefined && $scope.user.stateProvince != "" && $scope.selectedCountry != null) {
for (var stateIndex = 0; stateIndex < $scope.selectedCountry.state_province.length; stateIndex++) {
var state = $scope.selectedCountry.state_province[stateIndex];
if (state.name == $scope.user.stateProvince) {
$scope.selectedStateProvince = state;
break;
}
}
}
if ($scope.user.city != undefined && $scope.user.city != "" && $scope.selectedStateProvince != null) {
for (var cityIndex = 0; cityIndex < $scope.selectedStateProvince.city.length; cityIndex++) {
var city = $scope.selectedStateProvince.city[cityIndex];
if (city.name == $scope.user.city) {
$scope.selectedCity = city;
break;
}
}
}
});
})();<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style>
input.ng-invalid,
select.ng-invalid {
border: 1px solid #ffaaaa;
}
</style>
</head>
<body>
<div ng-app="AddressApp" ng-controller="AddressController">
<div class="container-fluid">
<form class="form-horizontal">
<h1>Location</h1>
<div class="form-group">
<label class="col-sm-2 control-label">Country:</label>
<div class="col-sm-4">
<select class="form-control" ng-required="true" ng-model="selectedCountry" ng-options="country.label for country in countries"></select>
<input type="text" ng-model="user.country" value="{{user.country=selectedCountry.name}}" />
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">State/Province:</label>
<div class="col-sm-4">
<select class="form-control" ng-required="true" ng-model="selectedStateProvince" ng-options="state.label for state in selectedCountry.state_province" ng-disabled="selectedCountry===undefined"></select>
<input type="text" ng-model="user.stateProvince" value="{{user.stateProvince=selectedStateProvince.name}}" />
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">City:</label>
<div class="col-sm-4">
<select class="form-control" ng-required="true" ng-model="selectedCity" ng-options="city.name for city in selectedStateProvince.city" ng-disabled="selectedStateProvince===undefined"></select>
<input type="text" ng-model="user.city" value="{{user.city=selectedCity.name}}" />
</div>
</div>
<div class="form-group">
<div class="col-sm-3"></div>
<div class="col-sm-3">
<input class="btn btn-info" type="submit" value="Submit" name="submit" ng-disabled="form.invalid" />
</div>
<div class="col-sm-3">{{$valid}}</div>
<div class="col-sm-3"></div>
</div>
</form>
</div>
</div>
</body>
</html>我需要限制用户的可见选项，以便用户可以先选择国家，然后选择州/省，然后选择城市。选择另一个国家/地区后，州/省将相应更新。我可以使用带有 ng-Options 属性的 AngularJS 1.6.x 来显示表单。但是，如果用户在页面加载之前已经填充了数据，我想返回到预先选择了一些对象的表单。目前，我只能使用 for 循环在国家对象中搜索相同的值，并将选定的对象返回给那些选定的 ng-model。例如，如果用户已经在下面输入了“user.country”字段，我将不得不编写一个 for 循环来返回正确的对象，这样子序列选择字段才会起作用。
有没有一种方法可以简化这一点，这样我就可以在下面获取对象及其名称，而无需通过条目对象来预填充表单选择表单并且仍然让对象在此表单中工作？
谢谢
【问题讨论】：
标签： javascript angularjs html forms