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 相关文章推荐
JavaScript中的History历史对象
Jan 16 Javascript
JavaScript 学习笔记(十一)
Jan 19 Javascript
jQuery Validation实例代码 让验证变得如此容易
Oct 18 Javascript
js将控件隐藏的方法及display属性介绍
Jul 04 Javascript
js中switch case循环实例代码
Dec 30 Javascript
angularjs中的单元测试实例
Dec 06 Javascript
BOOTSTRAP时间控件显示在模态框下面的bug修复
Feb 05 Javascript
jQuery左右滚动支持图片放大缩略图图片轮播代码分享
Aug 26 Javascript
Jquery实现仿京东商城省市联动菜单
Nov 19 Javascript
动态加载js、css的实例代码
May 26 Javascript
详解vue.js的事件处理器v-on:click
Jun 27 Javascript
解决VUE自定义拖拽指令时 onmouseup 与 click事件冲突问题
Jul 24 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
CodeIgniter多语言实现方法详解
2016/01/20 PHP
JavaScript类和继承 constructor属性
2010/03/04 Javascript
jQuery Study Notes学习笔记 (二)
2010/08/04 Javascript
Jquery中Event对象属性小结
2015/02/27 Javascript
jquery实现的Accordion折叠面板效果代码
2015/09/02 Javascript
javascript数组克隆简单实现方法
2015/12/16 Javascript
JQuery用户名校验的具体实现
2016/03/18 Javascript
jQuery简单实现上下,左右滑动的方法
2016/06/01 Javascript
AngularJS通过$location获取及改变当前页面的URL
2016/09/23 Javascript
jQuery中ztree 点击文本框弹出下拉框的实例代码
2017/02/05 Javascript
nodejs实现连接mongodb数据库的方法示例
2018/03/15 NodeJs
微信小程序如何刷新当前界面的实现方法
2019/06/07 Javascript
pm2启动ssr失败的解决方法
2019/06/29 Javascript
微信小程序云函数使用mysql数据库过程详解
2019/08/07 Javascript
element-ui 本地化使用教程详解
2019/10/28 Javascript
Vue.js实现大屏数字滚动翻转效果
2019/11/29 Javascript
Vue中的nextTick作用和几个简单的使用场景
2021/01/25 Vue.js
Eclipse + Python 的安装与配置流程
2013/03/05 Python
在python环境下运用kafka对数据进行实时传输的方法
2018/12/27 Python
实例详解Matlab 与 Python 的区别
2019/04/26 Python
解决python3 requests headers参数不能有中文的问题
2019/08/21 Python
Python Pandas对缺失值的处理方法
2019/09/27 Python
Python语法垃圾回收机制原理解析
2020/03/25 Python
django rest framework使用django-filter用法
2020/07/15 Python
高考考python编程是真的吗
2020/07/20 Python
html5的画布canvas——画出弧线、旋转的图形实例代码+效果图
2013/06/09 HTML / CSS
最新的咖啡店创业计划书
2013/12/30 职场文书
岗位廉洁从政承诺书
2014/03/27 职场文书
优秀团干部个人事迹
2014/05/29 职场文书
公司行政专员岗位职责
2014/08/24 职场文书
单位租房协议范本
2014/12/03 职场文书
主持人大赛开场白
2015/05/29 职场文书
老干部座谈会主持词
2015/07/03 职场文书
python实现自定义日志的具体方法
2021/05/28 Python
详解Mysq MVCC多版本的并发控制
2022/04/29 MySQL
Mysql如何查看是否使用到索引
2022/12/24 MySQL