AngularJs options object.object
AngularJs options object.object
提问于 2016-12-20 05:26:10
我正在将国家和城市显示在一个选择框中的angularjs，这是良好的工作。ng-当我调用{{ country }时，国家模型显示输出。然而，ng-模型的城市不能被称为{城市}与它的模态名。我想称它为{城市}而不是{{city.city}}。注意，除了“城市”的模式之外，这两个复选框都正常工作，无法显示{城市}。
否则，当我通过ng-重复而不是ng-选项选择国家时，我能获得城市结果吗？
<select name="Country" ng-model="country" class="item item-input item-select major" required>
<option value=""> Select a Country </option>
<option ng-repeat="country in countries" value="{{country.iso_code_3}}">{{country.name}}</option>
</select>
<select name="City" ng-model="city" data-ng-options="city.name for city in cities| filter:{CountryCode: country}:true" class="item item-input item-select major" required>
<option value="">-- Select a City --</option>
</select>回答 2
Stack Overflow用户
回答已采纳
发布于 2016-12-20 07:11:48
单击此演示示例
Html代码供参考：
<html ng-app="myapp">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link href="style.css" rel="stylesheet" />
<script data-semver="1.5.8" src="https://code.angularjs.org/1.5.8/angular.js" data-require="angular.js@1.5.x"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<select ng-model="country" data-ng-options="country for country in countries" ng-change="countryChange()">
<option value="">Select country</option>
</select>
<br>
<select ng-model="state" ng-options="state for state in allStates">
<option value="">Select state</option>
</select>
<br>
Country: {{country}}
<br>
State: {{state}}
</body>
</html>JS代码供参考：
var app = angular.module('myapp', []);
app.controller('MainCtrl', function($scope) {
$scope.countries = ["USA","Canada"];
$scope.states = [{
"name": "Alabama",
"countryId": "USA"
}, {
"name": "Alaska",
"countryId": "USA"
}, {
"name": "Arizona",
"countryId": "USA"
}, {
"name": "Alberta",
"countryId": "Canada"
}, {
"name": "British columbia",
"countryId": "Canada"
}];
$scope.countryChange = function(){
$scope.allStates = [];
angular.forEach($scope.states, function(value){
if($scope.country == value.countryId){
$scope.allStates.push(value.name);
}
});
}
});Stack Overflow用户
发布于 2016-12-20 05:44:03
选中“可靠的国家状态”下拉列表框中的链接。
修改下面的HTML代码
<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="CountriesController">
<select ng-model="country" data-ng-options="country.name for country in countries" ng-change="updateCountry()">
<option value="">Select country</option>
</select>
<br>
<select ng-model="state" ng-options="state.name for state in availableStates">
<option value="">Select state</option>
</select>
<br>
Selected Country: {{country}}
<br>
Selected State: {{state}}
</body>
</html>script.js
var app = angular.module("app", []);
function CountriesController($scope) {
$scope.countries = [{
"name": "USA",
"id": 1
},{
"name": "Canada",
"id": 2
}];
$scope.states = [{
"name": "Alabama",
"id": 1,
"countryId": 1
}, {
"name": "Alaska",
"id": 2,
"countryId": 1
}, {
"name": "Arizona",
"id": 3,
"countryId": 1
}, {
"name": "Alberta",
"id": 4,
"countryId": 2
}, {
"name": "British columbia",
"id": 5,
"countryId": 2
}];
$scope.updateCountry = function(){
$scope.availableStates = [];
angular.forEach($scope.states, function(value){
if(value.countryId == $scope.country.id){
$scope.availableStates.push(value);
}
});
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/41235440
复制相关文章
相似问题
腾讯云开发者
