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 相关文章推荐
Tinymce+jQuery.Validation使用产生的BUG
Mar 29 Javascript
动态载入/删除/更新外部 JavaScript/Css 文件的代码
Jul 03 Javascript
js控制frameSet示例
Sep 10 Javascript
javascript数组快速打乱重排的方法
Jan 02 Javascript
在JS数组特定索引处指定位置插入元素的技巧
Aug 24 Javascript
jQuery 自定义下拉框(DropDown)附源码下载
Jul 22 Javascript
js实现下拉菜单效果
Mar 01 Javascript
通过js动态创建标签,并设置属性方法
Feb 24 Javascript
AngularJS对动态增加的DOM实现ng-keyup事件示例
Mar 12 Javascript
js input输入百分号保存数据库失败的解决方法
May 26 Javascript
D3.js 实现带伸缩时间轴拓扑图的示例代码
Jan 20 Javascript
前端vue+elementUI如何实现记住密码功能
Sep 20 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
强烈推荐:php.ini中文版(1)
2006/10/09 PHP
PHP curl模拟浏览器采集阿里巴巴的实现代码
2011/04/20 PHP
通达OA公共代码 php常用检测函数
2011/12/14 PHP
phpmail类发送邮件函数代码
2012/02/20 PHP
php中++i 与 i++ 的区别
2012/08/08 PHP
Discuz不使用插件实现简单的打赏功能
2019/03/21 PHP
jQuery 追加元素的方法如append、prepend、before
2014/01/16 Javascript
分享五个有用的jquery小技巧
2015/10/08 Javascript
React.js入门学习第一篇
2016/03/30 Javascript
JavaScript仿百度图片浏览效果
2016/11/23 Javascript
火狐和ie下获取javascript 获取event的方法(推荐)
2016/11/26 Javascript
JS实现多级菜单中当前菜单不随页面跳转样式而发生变化
2017/05/30 Javascript
详谈for循环里面的break和continue语句
2017/07/20 Javascript
PHP自动加载autoload和命名空间的应用小结
2017/12/01 Javascript
vue 中swiper的使用教程
2018/05/22 Javascript
Express之托管静态文件的方法
2018/06/01 Javascript
Js中将Long转换成日期格式的实现方法
2018/06/05 Javascript
详解一个基于react+webpack的多页面应用配置
2019/01/21 Javascript
vue组件化中slot的基本使用方法
2019/05/01 Javascript
详解VUE调用本地json的使用方法
2019/05/15 Javascript
微信小程序wx.request拦截器使用详解
2019/07/09 Javascript
Vue.js组件实现选项卡以及切换特效
2019/07/24 Javascript
Vue组件简易模拟实现购物车
2020/12/21 Vue.js
在Python中操作字典之setdefault()方法的使用
2015/05/21 Python
Python编写电话薄实现增删改查功能
2016/05/07 Python
学习python可以干什么
2019/02/26 Python
python实现趣味图片字符化
2019/04/30 Python
Python3内置模块之base64编解码方法详解
2019/07/13 Python
关于PyTorch 自动求导机制详解
2019/08/18 Python
CSS3 中filter(滤镜)属性使用详解
2020/04/07 HTML / CSS
SmartBuyGlasses丹麦:网上购买名牌太阳镜、眼镜和隐形眼镜
2016/10/01 全球购物
Engel & Bengel官网:婴儿推车、儿童房家具和婴儿设备
2019/12/28 全球购物
主持人演讲稿
2014/05/13 职场文书
反对邪教标语
2014/06/30 职场文书
党的群众路线教育实践活动剖析材料
2014/09/30 职场文书
mysql连接查询中and与where的区别浅析
2021/07/01 MySQL