我想更新有关选择国家/地区的州列表。我对此进行了一些研究，建议使用 $parent 因为 ng-if 在 Controller 范围内不起作用。但这对我来说也不起作用。
有人可以帮助我了解如何将值纳入状态选择控制吗？
另外我也想知道如果我的 HTML 中有多个 ng-if 会怎样。 (再次嵌套 $parent.$parent.$parent... 不起作用)
骗子链接:Plunker Link
"use strict";
var app = angular.module("app", []);
function CountriesController($scope) {
$scope.condition = true;
$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);
}
});
}
}<!DOCTYPE html>
<html data-ng-app="app">
<head>
<script data-require="<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="27464940524b4655094d54671609160912" rel="noreferrer noopener nofollow">[email protected]</a>" data-semver="1.1.5" 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 data-ng-controller="CountriesController">
<div ng-if="condition">
<select data-ng-model="country" data-ng-options="country.name for country in countries" data-ng-change="updateCountry()">
<option value="">Select country</option>
</select>
<br>
<select data-ng-model="state" data-ng-options="state.name for state in availableStates">
<option value="">Select state</option>
</select>
<br> Country: {{country}}
<br> State: {{state}}
</div>
</body>
</html>最佳答案
您可以通过过滤来使用您的国家/地区列表，而不是制作单独的列表
filter: {countryId: $parent.country.id}
"use strict";
var app = angular.module("app", []);
function CountriesController($scope) {
$scope.condition = true;
$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);
}
});
}
}<!DOCTYPE html>
<html data-ng-app="app">
<head>
<script data-require="<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="81e0efe6f4ede0f3afebf2c1b0afb0afb4" rel="noreferrer noopener nofollow">[email protected]</a>" data-semver="1.1.5" 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 data-ng-controller="CountriesController">
<div ng-if="condition">
<select data-ng-model="country" data-ng-options="country.name for country in countries" data-ng-change="">
<option value="">Select country</option>
</select>
<br>
<select data-ng-model="state" data-ng-options="state.name for state in states | filter:{countryId: country.id}:true">
<option value="">Select state</option>
</select>
<br> Country: {{country}}
<br> State: {{state}}
</div>
</body>
</html>关于angularjs - 更新 AngularJS 中 ng-if 内的 <select> 标签，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32839186/