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

回答

相關問題