![option对象错误]( "option对象错误")
本文介绍了级联下拉angularjs ng-option对象错误的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我用过这个例子 http://devzone.co.in/simple-example-of-dependable-dropdowns-cascading-dropdowns-using-angularjs/ 这里工作正常，但我用索引号获取对象而不是获取值
我的控制器'使用严格';
/*** @ngdoc 对象* @name test.Controllers.TestController* @description 测试控制器* @requires ng.$scope*/有角的.module('测试').controller('测试控制器', ['$范围',功能($范围){$scope.countries = {'印度': {马哈拉施特拉邦":[浦那"、孟买"、那格浦尔"、阿科拉"]、'中央邦':['印多尔'、'博帕尔'、'贾巴尔普尔']，'拉贾斯坦邦':['斋浦尔'、'阿杰梅尔'、'焦特布尔']},'美国': {'阿拉巴马':['蒙哥马利'，'伯明翰']，'加利福尼亚':['萨克拉门托'，'弗里蒙特']，'伊利诺伊州':['斯普林菲尔德'、'芝加哥']},'澳大利亚': {'新南威尔士':['悉尼']，'维多利亚':['墨尔本']}};$scope.GetSelectedCountry = 函数 () {$scope.strCountry = document.getElementById("country").value;var datas =$scope.strCountry;console.log(JSON.stringify(datas));};$scope.GetSelectedState = 函数 () {$scope.strState = document.getElementById("state").value;};}]);
我的查看页面
国家:选择 状态:选择 城市:选择{{城市}} 所选国家:{{strCountry}} 选定状态:{{strState}} 选择的城市:{{城市}} 解决方案
如果只想获取选中的国家和州，可以遍历对象，检查哪个键与 ng-model 的值匹配.要获得城市，您只需返回 ng-model 的值.
angular.module('test', []).controller('TestController', ['$scope',功能($范围){$scope.countries = {'印度': {马哈拉施特拉邦":[浦那"、孟买"、那格浦尔"、阿科拉"]、'中央邦':['印多尔'、'博帕尔'、'贾巴尔普尔']，'拉贾斯坦邦':['斋浦尔'、'阿杰梅尔'、'焦特布尔']},'美国': {'阿拉巴马':['蒙哥马利'，'伯明翰']，'加利福尼亚':['萨克拉门托'，'弗里蒙特']，'伊利诺伊州':['斯普林菲尔德'、'芝加哥']},'澳大利亚': {'新南威尔士':['悉尼']，'维多利亚':['墨尔本']}};$scope.getCountry = function(val) {for (var key in $scope.countries) {如果 ($scope.countries.hasOwnProperty(key)) {if ($scope.countries[key] === val) {alert('您选择了:' + key);}}}};$scope.getCity = 函数(城市，州){for (var key in state) {如果 (state.hasOwnProperty(key)) {如果(状态[键] === 城市){alert('您选择了:' + key);}}}};$scope.alertCity = 函数(城市){alert('你选择了'+城市);};}]);
<script src="https://code.angularjs.org/1.3.15/angular.min.js"><<;/脚本><div ng-app="测试"><div ng-controller="TestController"><div>国家:<select id="country" ng-model="states" ng-options="country for (country, states) in countries" ng-change="getCountry(states)"><option value=''>选择</option></选择>
<div>状态:<select id="state" ng-disabled="!states" ng-model="cities" ng-options="state for (state,city) in states" ng-change="getCity(cities, states)"><option value=''>选择</option></选择>
<div>城市:<select id="city" ng-disabled="!cities || !states" ng-model="city" ng-change="alertCity(city)"><option value=''>选择</option><option ng-repeat="城市中的城市" value="{{city}}">{{city}}</option></选择>
i have used this example http://devzone.co.in/simple-example-of-dependable-dropdowns-cascading-dropdowns-using-angularjs/ here its working fine but my getting object with index number rather than getting value
my controller 'use strict';
/**
* @ngdoc object
* @name test.Controllers.TestController
* @description TestController
* @requires ng.$scope
*/
angular
.module('test')
.controller('TestController', [
'$scope',
function($scope) {
$scope.countries = {
'India': {
'Maharashtra': ['Pune', 'Mumbai', 'Nagpur', 'Akola'],
'Madhya Pradesh': ['Indore', 'Bhopal', 'Jabalpur'],
'Rajasthan': ['Jaipur', 'Ajmer', 'Jodhpur']
},
'USA': {
'Alabama': ['Montgomery', 'Birmingham'],
'California': ['Sacramento', 'Fremont'],
'Illinois': ['Springfield', 'Chicago']
},
'Australia': {
'New South Wales': ['Sydney'],
'Victoria': ['Melbourne']
}
};
$scope.GetSelectedCountry = function () {
$scope.strCountry = document.getElementById("country").value;
var datas =$scope.strCountry;
console.log(JSON.stringify(datas));
};
$scope.GetSelectedState = function () {
$scope.strState = document.getElementById("state").value;
};
}
]);
my view page
Country: Select States:Select City: Select {{city}} Selected Country: {{strCountry}} Selected State: {{strState}} Selected City: {{city}}
解决方案
If you just want to get the selected country and state, can iterate over the object and check which key matches the value of ng-model. To get the city, you only have to return the value of ng-model.
angular.module('test', [])
.controller('TestController', ['$scope',
function($scope) {
$scope.countries = {
'India': {
'Maharashtra': ['Pune', 'Mumbai', 'Nagpur', 'Akola'],
'Madhya Pradesh': ['Indore', 'Bhopal', 'Jabalpur'],
'Rajasthan': ['Jaipur', 'Ajmer', 'Jodhpur']
},
'USA': {
'Alabama': ['Montgomery', 'Birmingham'],
'California': ['Sacramento', 'Fremont'],
'Illinois': ['Springfield', 'Chicago']
},
'Australia': {
'New South Wales': ['Sydney'],
'Victoria': ['Melbourne']
}
};
$scope.getCountry = function(val) {
for (var key in $scope.countries) {
if ($scope.countries.hasOwnProperty(key)) {
if ($scope.countries[key] === val) {
alert('You selected: ' + key);
}
}
}
};
$scope.getCity = function(city, state) {
for (var key in state) {
if (state.hasOwnProperty(key)) {
if (state[key] === city) {
alert('You selected: ' + key);
}
}
}
};
$scope.alertCity = function(city) {
alert('You selected ' + city);
};
}]);
<script src="https://code.angularjs.org/1.3.15/angular.min.js"></script>
<div ng-app="test">
<div ng-controller="TestController">
<div>
Country:
<select id="country" ng-model="states" ng-options="country for (country, states) in countries" ng-change="getCountry(states)">
<option value=''>Select</option>
</select>
</div>
<div>
States:
<select id="state" ng-disabled="!states" ng-model="cities" ng-options="state for (state,city) in states" ng-change="getCity(cities, states)">
<option value=''>Select</option>
</select>
</div>
<div>
City:
<select id="city" ng-disabled="!cities || !states" ng-model="city" ng-change="alertCity(city)">
<option value=''>Select</option>
<option ng-repeat="city in cities" value="{{city}}">{{city}}</option>
</select>
</div>
</div>
</div>
这篇关于级联下拉angularjs ng-option对象错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！