js:使用angular的http获取json数据
Posted dYb
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js:使用angular的http获取json数据相关的知识，希望对你有一定的参考价值。
一，本例中使用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数据的主要内容，如果未能解决你的问题，请参考以下文章
angular.js > 如何在视图中获取内部 JSON 数据（使用 ng-repeat 指令）