使用ng选项

-1

这里我创建了一个国家数组，当我选择一个特定的国家时，他们的状态列表应该显示在另一个选择选项卡中。我怎样才能做到这一点使用ng选项

<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>

来源

2016-09-29 kishore

哪里是每个国家的国家名单中？ –

，我去给你在正确的方向上暗示，他们一吨的方式做到这一点，这是远不及一个现实世界的例子。

<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将来自您的后端，因此您可以在完成后将所选的国家/地区ID和状态ID发送到服务器。

来源

2016-09-29 08:17:43 CularBytes

伟大的工作谢谢你的解决方案 – kishore

没问题，欢迎来到stackoverflow。确保将答案标记为已接受。 – CularBytes

请注意，鉴于有限的信息，这只是众多解决方案之一。假设你有每个国家收集状态的列表：

//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>

来源

2016-09-29 08:19:16

这是你查询的解决方案。首先，你需要打函数时的值国家变化。然后比较它的值并得到状态。 测试的代码 ..

<!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>

来源

2016-09-29 08:24:21

使用ng选项

回答

相关问题