AngularJS Dropdown的问题 [英] Issue with AngularJS Dropdown
问题描述
我创建了AngularJS可靠的下拉菜单,它可以很好地处理脚本文件中的静态数据.现在如何将数据从URL绑定到这些下拉列表.我没有用于下拉菜单的单独网址,有一个网址可以提供所有内容.
I have created AngularJS dependable dropdowns, its working fine with static data from script file. Now how can I bind data to these dropdowns from an URL. I don't have a separate url for dropdowns, there is one url delivering everything.
我应该如何解析数据以获得所需的输出?我对此很陌生,如果有人可以帮助,将不胜感激!
How should I parse the data to get the required output? Iam very new to this, Will be grateful if anyone can help!!
推荐答案
第一个在这里工作的朋克:
First working Punker here:
http://plnkr.co/edit/okKOeQViflRseqrOYeOY?p=preview
问题在于您的问题陈述了某些内容,而您的演示则显示了其他内容.
The problem is your question states something and your demo shows something else.
您可以直接使用angular即时解析JSON数据,然后没有ng-change
函数来检测选择了哪个下拉列表.有关我如何解析html
本身中的数据的信息,请参考下面的代码.
You can directly parse the JSON data on fly using angular then you don't have ng-change
function to detect which dropdown was selected. Refer to the below code on how I'm parsing the data in html
itself.
<div class="col-sm-4">
<am-multiselect class="input-lg"
template-url="multiselect.tmpl.html"
ng-model="selectedcountry" ms-header="Select country" style="width:200px;"
options="c.CountryName for c in table"
ng-change="setState(selectedcountry)"
change="selected()"></am-multiselect>
</div>
</div>
<div class="form-group">
<div class="col-sm-4">
<am-multiselect class="input-lg" multiple="true" ms-selected="{{selectedState.length}} State(s) selected"
ng-model="selectedState" ms-header="Select States"
options="s.STATE for s in table"
ng-change="setCity(selectedState)"
template-url="multiselect.tmpl.html" style="width:500px;"
change="selected()">
</am-multiselect>
</div>
</div>
<div class="form-group">
<div class="col-sm-4">
<am-multiselect class="input-lg" multiple="true" ms-selected="{{selectedCity.length}} City(ies) selected"
ng-model="selectedCity" ms-header="Select City"
options="m.CityName for m in table"
template-url="multiselect.tmpl.html" style="width:500px;"
change="selected()"></am-multiselect>
</div>
</div>
接下来的第二个下拉列表是 STATE ,即使范围发生了变化,它也不会触发更改.
next your second dropdown which is STATE doesn't trigger on change even if the scope is changed.
因此,当$watch
发生作用域变化时,将其应用于 CITY
So use a $watch
to see the changes to scope when it happens apply it to the CITY
所以您的js:
angular.module('app', ['am.multiselect']);
angular.module('app')
.controller('ctrl', function($scope, $http, $location, $filter,$window) {
var tableData = {
"Table": [{
"CountryUid": 3,
"CountryName": "INDIA",
"STATE": "AndraPradesh",
"CityId": 3,
"CityName": "Vijayawada"
}, {
"CountryUid": 2,
"CountryName": "USA",
"STATE": "Florida",
"CityId": 3,
"CityName": "Tampa"
}, {
"CountryUid": 3,
"CountryName": "INDIA",
"STATE": "Assam",
"CityId": 3,
"CityName": "Jorhat"
}]
};
var countries = [];
var states = [];
var cities = [];
$scope.table = tableData.Table;
$scope.countries = countries;
$scope.states = states;
$scope.cities = cities;
$scope.selectedsite = null;
$scope.selectedState = [];
$scope.selectedCity = [];
$scope.setState = function(country) {
$scope.selectedStates = tableData.Table.filter(function(el) {
return el.CountryName === country
});
$scope.selectedState = $scope.selectedStates.map(function(elm) {return elm.STATE;});
}
$scope.setCity = function(state) {
selectedCity = tableData.Table.filter(function(el) {
return el.STATE === state
});
$scope.selectedCity = selectedCity.map(function(elm) {return elm.CityName;});
}
$scope.$watch('selectedStates', function(newVal, oldVal, theScope) {
$scope.selectedCity = newVal.map(function(elm) {return elm.CityName;});
console.log(newVal,$scope.selectedCity);
});
PS:上面的插件并不是很完美,您可能会解决一些小问题.
PS: The above plunker isn't very perfect you may some some minor issues which you should be able to solve.
这篇关于AngularJS Dropdown的问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!