一，本例中使用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>js:使用angular的http获取json数据
原文地址：https://www.cnblogs.com/dybe/p/8317931.html