一，本例中使用amaze的select框架，配合angular显示json数据
框架官网链接：http://amazeui.org/javascript/selected
由于页面的异步刷新导致select配置完成后不再接收angular的数据，导致数据无法显示，这里解决使用setTimeout延迟select框架的配置
完成angular数据的植入
1，使用的json数据：
2，具体实现代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<!--引入amaze下拉选框需要的资源-->
<script type="text/javascript" src="../../public/javascript/chosen/chosen.jquery.min.js"></script>
<link type="text/css" rel="stylesheet" href="../../public/javascript/chosen/chosen.min.css" />
<script src="../../public/angular-1.6.5/angular.js"></script>
<script type="text/javascript" src="../../public/javascript/jquery-1.11.1.min.js"></script>
</head>
<script language="JavaScript">
var app = angular.module(‘shop‘, []);
app.controller(‘shopCrl‘, function($scope,$http) {
//$scope.pron=[{id:1,name:‘成都市‘},{id:2,name:‘彭州市‘},{id:3,name:‘德阳市‘}];
var coun;
var strn;
//使用angular http方法接收数据
$http({
method: ‘GET‘,
url: ‘../../public/site.json‘
}).then(function successCallback(response) {
//初始化选择框
$scope.pron = response.data.pro;
strn = response.data.pro;
$scope.selectedItems=$scope.pron[0].proname;
$scope.strn=strn[0].proargs;
$scope.selectedItemsStr=$scope.strn[0].strname;
$scope.coun=$scope.strn[0].strargs;
coun=strn[0].proargs;
}, function errorCallback(response) {
});
$scope.getpro=function(){
}
//选择州级
$scope.chapro=function(selectedItems){
strn.forEach(function(val,i,strn){
//遍历数据查找与表相等的数组
if(selectedItems==strn[i].proname){
$scope.strn = strn[i].proargs;
//改变ng-model的值
$scope.selectedItemsStr=$scope.strn[0].strname;
coun=strn[i].proargs
}
})
};
//选择市级
$scope.chastr=function(selectedItemsStr){
coun.forEach(function(val,i,coun){
if(selectedItemsStr==coun[i].strname){
$scope.coun = coun[i].strargs;
}
})
};
});
</script>
<body ng-app="shop">
<div ng-controller="shopCrl">
<div class="frmInputBox frmInputBoxNoTextLimit">
<div class="selectionGroup">
<div class="dropDown" style="width:120px;">
<!--<select data-placeholder="所在州" class="chosen-select-no-single" ng-click="getpro()" tabindex="9" ng-model="selectedItems" ng-change="chapro(selectedItems)">-->
<select data-placeholder="所在州" id="pro" class="" ng-click="getpro()" tabindex="9" ng-model="selectedItems" ng-change="chapro(selectedItems)">
<option value=""></option>
<option ng-repeat="item in pron">{{item.proname}}</option>
</select>
</div>
</div>
<div class="selectionGroup">
<div class="dropDown" style="width:120px;">
<select ng-model="selectedItemsStr" id="str" style="height: 37px;width: 118px" ng-change="chastr(selectedItemsStr)" tabindex="9">
<option ng-repeat="item in strn" >{{item.strname}}</option>
</select>
</div>
</div>
<div class="selectionGroup">
<div class="dropDown" style="width:120px;">
<select style="height: 37px;width: 118px" id="cou" tabindex="9">
<option ng-repeat="item in coun" value="{{item.couid}}">{{item.couname}}</option>
</select>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript">
//配置选择框，使用setTimeout延迟加载框架配置，让angular的数据先一步进入
setTimeout(function() {
$("#pro").addClass("chosen-select-no-single");
$("#str").addClass("chosen-select-no-single");
$("#cou").addClass("chosen-select-no-single");
/*
.chosen-select-no-single‘ : {disable_search_threshold:10} option小于10项隐藏搜索框。
.chosen-select-deselect‘:{allow_single_deselect:true} 设置为 true 时非必选的单选框会显示清除选中项图标
.chosen-select-no-results‘: {no_results_text:‘Oops, nothing found!‘} 没有搜索到结果的时候显示的内容
*/
var config = {
‘.chosen-select‘: {},
‘.chosen-select-deselect‘: {allow_single_deselect: true},
‘.chosen-select-no-single‘: {disable_search_threshold: 10},
‘.chosen-select-no-results‘: {no_results_text: ‘Oops, nothing found!‘},
‘.chosen-select-width‘: {width: "100%"}
}
for (var selector in config) {
$(selector).chosen(config[selector]);
}
$(‘.chosen-select‘).chosen();
},10);
</script>
</html>
原文地址：https://www.cnblogs.com/dybe/p/8317931.html
时间： 2024-10-07 17:10:38