I have two drop down menus, the first is a list of states. Pick a state, second drop down is populated with the corresponding counties. On the back end I am getting a value for the state (AL) and a value for the county (north). The lists work as they should, except regardless of what you choose in the second menu, it defaults to the very bottom choice in the list. Example, choose Alabama as the state in the first menu, then choose Autauga as the county in the second list. Even though I chose Autauga, what gets selected is Lowndes.
<select ng-options="stateName.Value as stateName.Name for stateName in jsonState" ng-model="state.name">
<select ng-options="county.Value as county.Name for county in (jsonState|filter:{Value:state.name}:true)[0].Location" ng-model="state.county">
json example:
{
"id": "1",
"name":"Alabama",
"value":"AL",
"location":
[
{"name": "Autauga", "value": "north"},
{"name": "Lee", "value": "central"},
{"name": "Emery", "value": "south"},
{"name": "Lowndes", "value": "central"},
]
},
{
"id": "2",
"name":"Alaska",
"value":"AK",
"location":
[
{"name": "Autauga", "value": "north"},
{"name": "Lee", "value": "central"},
{"name": "Emery", "value": "south"},
{"name": "Lowndes", "value": "central"},
]
And the controller, which is loading a previous selection from memory if it exists and also gives you the option of saving a new selection with some simple validation:
.controller('RegionCtrl', function($scope, Vegetables, countyList, stateList, localStorageService, $location, $state)
{
$scope.jsonState = stateList.allStates();
var myRegion = angular.fromJson(localStorageService.get("region")) || [];
$scope.state =
{
'name': myRegion.state,
'county': myRegion.zone
}
$scope.mysettings
var region = []
localStorageService
$scope.jsonState = stateList.allStates();
$scope.saveRegion = function()
{
if ($scope.state['name'] == "" || $scope.state['county'] == "" )
{
alert("Please select your State and County");
}
else
{
region = ({'state': $scope.state['name'], 'zone': $scope.state['county'] })
localStorageService.add("region", angular.toJson(region))
$state.go('app.garden');
}
};
})
I assume the problem is in my ng-option statement, any help would be greatly appreciated!