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 相关文章推荐
XHTML下,JS浮动代码失效的问题
Nov 12 Javascript
JavaScript prototype属性使用说明
May 13 Javascript
Jquery中获取iframe的代码
Jan 11 Javascript
jQuery处理xml格式的返回数据(实例解析)
Nov 28 Javascript
详解如何在Angular中快速定位DOM元素
May 17 Javascript
react用Redux中央仓库实现一个todolist
Sep 29 Javascript
vue-element-admin 菜单标签失效的解决方式
Nov 12 Javascript
Node.js 在本地生成日志文件的方法
Feb 07 Javascript
vue项目中使用vue-layer弹框插件的方法
Mar 11 Javascript
Javascript Web Worker使用过程解析
Mar 16 Javascript
JS实现进度条动态加载特效
Mar 25 Javascript
详解JavaScript的计时器和按钮效果设置
Feb 18 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
各种咖啡的英文名子是什么
2021/03/03 新手入门
谈谈关于php的优点与缺点
2013/04/11 PHP
PHP框架自动加载类文件原理详解
2017/06/06 PHP
php打开本地exe程序,js打开本地exe应用程序,并传递相关参数方法
2018/02/06 PHP
php实现图片压缩处理
2020/09/09 PHP
jquery索引在使用中的一些困惑
2013/10/24 Javascript
禁止空格提交表单的js代码
2013/11/17 Javascript
用jquery等比例控制图片宽高的具体实现
2014/01/28 Javascript
js的for in循环和java里foreach循环的区别分析
2015/01/28 Javascript
JavaScript控制网页平滑滚动到指定元素位置的方法
2015/04/17 Javascript
JavaScript学习笔记之DOM基础 2.4
2015/08/14 Javascript
javascript倒计时效果实现
2015/11/12 Javascript
Angular2 (RC5) 路由与导航详解
2016/09/21 Javascript
微信小程序开发之Tabbar实例详解
2017/01/09 Javascript
获取IE浏览器Cookie信息的方法
2017/01/23 Javascript
基于vue.js组件实现分页效果
2018/12/29 Javascript
Vue实现返回顶部按钮实例代码
2020/10/21 Javascript
Python ORM框架SQLAlchemy学习笔记之关系映射实例
2014/06/10 Python
跟老齐学Python之使用Python查询更新数据库
2014/11/25 Python
详解Python 数据库的Connection、Cursor两大对象
2018/06/25 Python
Python 词典(Dict) 加载与保存示例
2019/12/06 Python
Spring Boot中使用IntelliJ IDEA插件EasyCode一键生成代码详细方法
2020/03/20 Python
jupyternotebook 撤销删除的操作方式
2020/04/17 Python
tensorflow从ckpt和从.pb文件读取变量的值方式
2020/05/26 Python
利用简洁的图片预加载组件提升html5移动页面的用户体验
2016/03/11 HTML / CSS
HTML5页面嵌入小程序没有返回按钮及返回页面空白的问题
2020/05/28 HTML / CSS
法国在线购买汽车轮胎网站:123pneus.fr
2019/02/25 全球购物
Ajax的工作原理
2015/12/04 面试题
艺术系应届生的自我评价
2013/10/19 职场文书
消防应急演练方案
2014/02/12 职场文书
搞笑的爱情检讨书
2014/10/01 职场文书
2014年为民办实事工作总结
2014/12/20 职场文书
个人先进事迹总结
2015/02/26 职场文书
2015个人简历自我评价语
2015/03/11 职场文书
2015年纪念“卢沟桥事变”78周年活动方案
2015/05/06 职场文书
解决vue中provide inject的响应式监听
2022/04/19 Vue.js