级联下拉angularjs NG选项对象错误 [英] cascading dropdown angularjs ng-option object error
本文介绍了级联下拉angularjs NG选项对象错误的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我用这个例子<一个href=\"http://devzone.co.in/simple-example-of-dependable-dropdowns-cascading-dropdowns-using-angularjs/\" rel=\"nofollow\">http://devzone.co.in/simple-example-of-dependable-dropdowns-cascading-dropdowns-using-angularjs/在这里它工作正常，但我的索引号获取对象，而不是获得价值
我的控制器
使用严格;
/ **
* @ngdoc对象
* @name test.Controllers.TestController
* @description的TestController
* @requires NG。$范围
* /角
.module（测试）
.controller（'的TestController'，[
'$范围'，
功能（$范围）{
$ scope.countries = {
印度：{
'马哈拉施特拉邦'：'浦'，'孟买'，'那格浦尔'，'阿科拉']，
中央邦：多尔，博帕尔'，'贾巴尔普尔']，
拉贾斯坦邦：斋浦尔，阿杰梅尔'，'焦特布尔']
}，
'美国'： {
'阿拉巴马'：'蒙哥马利'，'伯明翰']，
加利福尼亚：国王'，'弗里蒙特']，
伊利诺伊州：春田'，'芝加哥']
}，
澳大利亚：{
新南威尔士州'：'悉尼']，
'维多利亚'：'墨尔本']
}
};
$ scope.GetSelectedCountry =功能（）{
。$ scope.strCountry =的document.getElementById（国家）的价值;
VAR DATAS = $ scope.strCountry;
的console.log（JSON.stringify（DATAS））;
};
$ scope.GetSelectedState =功能（）{
。$ scope.strState =的document.getElementById（国家）的价值;
}; }
]）;
我的看法页
国家：
选择
＆NBSP;
声明：选择
＆NBSP;
市：
选择
{{市}}
＆NBSP;
选择国家：
{{strCountry}}
＆NBSP;
选中状态：
{{strState}}
＆NBSP;
选择城市：
{{市}}
解决方案
如果你只是想获得所选国家和国家，可以在对象中迭代，并检查其关键NG-模式的价值相匹配。为了得到这个城市，你只需要返回NG-模式的价值。
\r
\r\r
\r angular.module（测试，[]）\r
.controller（'的TestController'，['$范围'，\r
功能（$范围）{\r
$ scope.countries = {\r
印度：{\r
'马哈拉施特拉邦'：'浦'，'孟买'，'那格浦尔'，'阿科拉']，\r
中央邦：多尔，博帕尔'，'贾巴尔普尔']，\r
拉贾斯坦邦：斋浦尔，阿杰梅尔'，'焦特布尔']\r
}，\r
'美国'： {\r
'阿拉巴马'：'蒙哥马利'，'伯明翰']，\r
加利福尼亚：国王'，'弗里蒙特']，\r
伊利诺伊州：春田'，'芝加哥']\r
}，\r
澳大利亚：{\r
新南威尔士州'：'悉尼']，\r
'维多利亚'：'墨尔本']\r
}\r
};\r
\r
$ scope.getCountry =功能（VAL）{\r
为（在$ scope.countries VAR键）{\r
如果（$ scope.countries.hasOwnProperty（键））{\r
如果（$ scope.countries [关键] === VAL）{\r
警报（'您已选择：'+键）;\r
}\r
}\r
}\r
};\r
\r
$ scope.getCity =功能（市，州）{\r
对于（国有重点VAR）{\r
如果（state.hasOwnProperty（键））{\r
如果（州[关键] ===市）{\r
警报（'您已选择：'+键）;\r
}\r
}\r
}\r
};\r
\r
$ scope.alertCity =功能（市）{\r
警报（您选择'+城市）;\r
};\r
}]）; \r
＆LT;脚本SRC =HTTPS：//$c$c.angularjs。组织/ 1.3.15 / angular.min.js＆GT;＆LT; / SCRIPT＆GT;\r
\r
＆LT; DIV NG-应用=测试＆GT;\r
＆LT; DIV NG控制器=的TestController＆GT;\r
＆LT; DIV＆GT;\r
国家：\r
＆LT;选择一个id =国NG-模式=规定NG选项=国（国家，州）在国家NG变化=getCountry（州）＆GT;\r
＆LT;期权价值=''＆GT;选择＆LT; /选项＆GT;\r
＆LT; /选择＆GT;\r
＆LT; / DIV＆GT;\r
＆LT; DIV＆GT;\r
状态：\r
＆LT;选择一个id =状态NG-禁用= NG模型=城市NG选项=状态（州，市）在国家NG-变化=getCity（市，州）国家！ ＆GT;\r
＆LT;期权价值=''＆GT;选择＆LT; /选项＆GT;\r
＆LT; /选择＆GT;\r
＆LT; / DIV＆GT;\r
＆LT; DIV＆GT;\r
市：\r
＆LT;选择一个id =城市NG-禁用=城市||规定！NG模型=城市NG-变化=alertCity（市）＆GT;\r
＆LT;期权价值=''＆GT;选择＆LT; /选项＆GT;\r
＆LT;选项NG重复=城在城市VALUE ={{城市}}＆GT; {{城市}}＆LT; /选项＆GT;\r
＆LT; /选择＆GT;\r
＆LT; / DIV＆GT;\r
＆LT; / DIV＆GT;\r
＆LT; / DIV＆GT; \r
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选项对象错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
