Question

这里我创建了一个包含国家/地区的数组，当我选择一个特定的国家/地区时，其状态列表应显示在另一个选择标签中。我怎样才能做到这一点

<div ng-app="myApp" ng-controller="myCtrl">

    <select ng-model="selectedName" ng-options="item for item in names">
    </select>
    {{selectedName}}

</div>

        <script>
            var app = angular.module('myApp', []);
            app.controller('myCtrl', function($scope) {
                $scope.names = ["India", "US", "UK"];
            });
        </script>


</body>
</html>

Answer 1

我会给你一个正确方向的暗示，他们有很多方法可以做到这一点，这远不是现实世界的例子。

<div ng-app="myApp" ng-controller="myCtrl">

    <select ng-model="selectedName" ng-options="item for item in names" ng-change="countrySelected()"></select>
    {{selectedName}}
    <select ng-model="selectedState" ng-options="item for item in states"></select>
    {{selectedState}}

</div>

<script>
            var app = angular.module('myApp', []);
            app.controller('myCtrl', function($scope) {
                $scope.names = ["India", "US", "UK"];
                $scope.states = [];

                $scope.countrySelected = function () {
                    if ($scope.selectedName == "India") {
                        $scope.states = ["Some", "State"];
                    }
                }
            });
</script>

通常情况下，您的后端会有结构化数据，例如：

[{ country:"US", states: ["One", "Two"]}]

选择国家/地区后，应在其他选择框中使用这些州。此外，一些ID将来自您的后端，因此您可以在完成后将选定的countryID和stateID发送到服务器。

Answer 2

请注意，鉴于信息有限，这只是众多解决方案中的一种。假设您有每个国家/地区集合的州名列表：

//For example
$scope.listOfStatesPerCountry = {
   country: {
     name: 'India',
     states: ['Northern-India', 'Southern-India'] 
   }
   country: {
     name: 'US',
     states: ['Alabama', 'Kentucky', 'California']
   }
}

$scope.getStatesForCountry = function() {
  if($scope.selectedCountry) {
    return $scope.listOfStatesPerCountry[$scope.selectedCountry];
  }
  return [];
}

相应的HTML

 <select ng-model="selectedCountry" ng-options="country for country in listOfStatesPerCountry">
    </select>
 <select ng-options="state for state in getStatesForCountry()"></select>

Answer 3

以下是您的查询的解决方案。首先，您需要在国家/地区的价值发生变化时点击该功能。然后比较它的值并获得状态。 经过测试的代码 ..

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

<select ng-model="selectedName" ng-change="selectstate(selectedName)" ng-options="item for item in names">
</select>
<div ng-if='states'>
<select ng-model="selectedState" ng-options="item for item in states">
</select></div>
 {{states}}
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.names = ["India", "UK", "US"];
$scope.selectstate = function(value){
if(value=='India'){
$scope.states = ["Chandigarh", "Punjab", "Bihar"];
}else if(value=='UK'){
$scope.states = ["fg", "jg", "fh"];
}else if(value=='US'){
$scope.states = ["fhgfj", "gjffg", "gfjjfg"];
}else{
//do nothing
}

alert(value)
}
});
</script>

<p>This example shows how to fill a dropdown list using the ng-options directive.</p>

</body>
</html>

使用ng-option

3 个答案: