js:使用angular的http獲取json數據
阿新 • • 發佈：2018-01-19
index item dcl data- cli blog fun url 無法
一，本例中使用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數據