AngularJS读取JSON及XML文件的方法示例


Posted in Javascript onMay 25, 2017

本文实例讲述了AngularJS读取JSON及XML文件的方法。分享给大家供大家参考,具体如下:

<!doctype html>
<meta charset="UTF-8">
<html ng-app='routingDemoApp'>
<head>
 <title>AJAX and promise</title>
 <link href="bootstrap.min.css" rel="external nofollow" rel="stylesheet">
 <link href="self.css" rel="external nofollow" rel="stylesheet">
</head>
<body >
<div class="panel panel-default" ng-controller="AjaxJson"> <!--创建控制器-->
 <div class="panel-body">
  <table class="table table-striped table-hover">
   <thead>
   <tr>
    <td>名</td>
    <td>种类</td>
    <td>价格</td>
    <td>保质期</td>
   </tr>
   </thead>
   <tbody>
   <tr ng-hide="products.length">
    <td colspan="4" class="text-center">没有数据</td>
     <!--当没有数据的时候,显示这行,有数据的时候,隐藏。-->
   </tr>
   <tr ng-repeat="item in products"> <!--将数据放到item里面,逐一读取-->
    <td ng-bind="item.name"></td>
    <td ng-bind="item.category"></td>
    <td ng-bind="item.price"></td>
    <td ng-bind="item.expiry"></td>
   </tr>
   </tbody>
  </table>
  <p><button ng-click="LoadJson()">加载JSON数据</button></p><!--触发函数-->
 </div>
</div>
<div class="panel panel-default" ng-controller="AjaxXml">
 <div class="panel-body">
  <table class="table table-striped table-hover">
   <thead>
   <tr>
    <td>名</td>
    <td>种类</td>
    <td>价格</td>
    <td>保质期</td>
   </tr>
   </thead>
   <tbody>
   <tr ng-hide="products.length">
    <td colspan="4" class="text-center">没有数据</td>
   </tr>
   <tr ng-repeat="item in products">
    <td ng-bind="item.name"></td>
    <td ng-bind="item.category"></td>
    <td ng-bind="item.price"></td>
    <td ng-bind="item.expiry"></td>
   </tr>
   </tbody>
  </table>
  <p><button ng-click="LoadXml()">加载xml数据</button></p>
 </div>
</div>
<script src="angular.min.js"></script>
<script src="angular-ui-router.js"></script>
<script src="ajax2.js"></script>
</body>
</html>
/*js*/
var app=angular.module("routingDemoApp",[]);
app.controller("AjaxJson",function($scope,$http){
 $scope.LoadJson=function(){
  $http.get("json.json")
   .success(function(data){
    $scope.products = data;
   })
   .error(function(){
    alert("出错")
   });
 };
});
app.controller("AjaxXml",function($scope,$http){
 $scope.LoadXml = function(){
  $http.get("xml.xml")
   .success(function(data){
    $scope.products = [];
    var productsElements = angular.element(data.trim()).find("product");
    for(var i=0;i<productsElements.length;i++){
     var product = productsElements.eq(i);
     $scope.products.push({
      name:product.attr("name"),
      category:product.attr("category"),
      price:product.attr("price"),
      expiry:product.attr("expiry")
     });
    }
   })
   .error(function(){
    alert("错误");
   })
 };
});
/*json*/
[
 {"name":"apple","category":"fruit","price":"1.5","expiry":10},
 {"name":"banana","category":"fruit","price":"1.3","expiry":14},
 {"name":"pears","category":"fruit","price":"1.2","expiry":15},
 {"name":"tuna","category":"fish","price":"1.0","expiry":16}
]

 

/*xml*/
<products>
 <product name="apple" category="fruit" price="1.5" expiry="10" />
 <product name="banana" category="fruit" price="14" expiry="14" />
 <product name="pears" category="fruit" price="1.3" expiry="13" />
 <product name="tuna" category="fish" price="1.2" expiry="12" />
</products>

JSON:

1)配置对应的控制器,将scope和http服务注入该控制器中。

2)使用$http.get(),把将要读取的数据文件的url写入。

3)使用回调函数,成功时,将所得的data赋给$scope作用域下的变量products。

4)由前台使用no-repeat指令进行遍历逐一取出数据。

XML:

1)配置对应的控制器,将$scope和http服务注入该控制器中。

2)使用$http.get(),把将要读取的数据文件的url写入。

3)使用回调函数,在success里面进行成功读取XML数据时的操作。

4)定义一个$scope创建的作用域下的(也就会前台可以访问)数组变量products,后面会将读取到的数据逐一插入到里面。

5)定义一个数据变量productElements,将XML文件里面的<product> 里的信息赋值给他。这里使用了trim()方法,原因是使用JS读取XML文件时前后会出现许多空字符。trim()方法可以将空字符去除。

6)使用for循环,将变量productElements里面每个<product> 的内容都插入到之前定义好的数组变量products里面。

7)由前台使用no-repeat指令进行遍历逐一取出数据。

Javascript 相关文章推荐
总结一些js自定义的函数
Aug 05 Javascript
了解jQuery技巧来提高你的代码
Jan 08 Javascript
JQuery 弹出框定位实现方法
Dec 02 Javascript
基于jQuery实现表格数据的动态添加与统计的代码
Jan 31 Javascript
JS远程获取网页源代码实例
Sep 05 Javascript
ionic实现带字的toggle滑动组件
Aug 27 Javascript
Canvas 绘制粒子动画背景
Feb 15 Javascript
vue中如何创建多个ueditor实例教程
Nov 14 Javascript
JS中call和apply函数用法实例分析
Jun 20 Javascript
js实现各浏览器全屏代码实例
Jul 03 Javascript
基于Angular 8和Bootstrap 4实现动态主题切换的示例代码
Feb 11 Javascript
Vue组件间的通信pubsub-js实现步骤解析
Mar 11 Javascript
bootstrap+jQuery实现的动态进度条功能示例
May 25 #jQuery
基于VUE选择上传图片并页面显示(图片可删除)
May 25 #Javascript
jQuery滚动插件scrollable.js用法分析
May 25 #jQuery
Angular2学习教程之TemplateRef和ViewContainerRef详解
May 25 #Javascript
Bootstrap组件之下拉菜单,多级菜单及按钮布局方法实例
May 25 #Javascript
vue-router实现webApp切换页面动画效果代码
May 25 #Javascript
Angular 2.x学习教程之结构指令详解
May 25 #Javascript
You might like
模仿OSO的论坛(二)
2006/10/09 PHP
php中批量替换文件名的实现代码
2011/07/20 PHP
用javascript获取textarea中的光标位置
2008/05/06 Javascript
基于JQuery的一个简单的鼠标跟随提示效果
2010/09/23 Javascript
JQuery 图片滚动轮播示例代码
2014/03/24 Javascript
基于jQuery实现选取月份插件附源码下载
2015/12/28 Javascript
JavaScript+html5 canvas绘制的圆弧荡秋千效果完整实例
2016/01/26 Javascript
JavaScript中数组的22种方法必学(推荐)
2016/07/20 Javascript
javascript中setAttribute兼容性用法分析
2016/12/12 Javascript
IntersectionObserver实现图片懒加载的示例
2017/09/29 Javascript
JavaScript设计模式之观察者模式(发布订阅模式)原理与实现方法示例
2018/07/27 Javascript
vue实现打印功能的两种方法
2018/09/07 Javascript
详解TypeScript+Vue 插件 vue-class-component的使用总结
2019/02/18 Javascript
vue实现Excel文件的上传与下载功能的两种方式
2019/06/28 Javascript
解决pycharm双击但是无法打开的情况
2020/10/31 Javascript
小程序实现点击tab切换左右滑动
2020/11/16 Javascript
[04:40]2016国际邀请赛中国区预选赛全程TOP10镜头集锦
2016/07/01 DOTA
Windows下python2.7.8安装图文教程
2016/05/26 Python
python面向对象_详谈类的继承与方法的重载
2017/06/07 Python
python中实现字符串翻转的方法
2018/07/11 Python
Python绘制正余弦函数图像的方法
2018/08/28 Python
利用Pycharm断点调试Python程序的方法
2018/11/29 Python
Python实现的大数据分析操作系统日志功能示例
2019/02/11 Python
Python定时任务随机时间执行的实现方法
2019/08/14 Python
Python的Lambda函数用法详解
2019/09/03 Python
Python安装依赖(包)模块方法详解
2020/02/14 Python
Scholastic父母商店:儿童书籍
2017/01/01 全球购物
美国女性奢华品牌精品店:INTERMIX
2017/10/12 全球购物
Linux不知道文件后缀名怎么判断文件类型
2012/04/26 面试题
函授毕业自我鉴定
2014/02/04 职场文书
商业活动邀请函
2014/02/04 职场文书
副主任竞聘演讲稿
2014/08/18 职场文书
创先争优活动承诺书
2014/08/30 职场文书
项目投资意向书范本
2015/05/09 职场文书
PyQt5爬取12306车票信息程序的实现
2021/05/14 Python
《群青的幻想曲》京力秋树角色PV公开
2022/04/08 日漫