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 相关文章推荐
ASP.NET jQuery 实例1(在TextBox里面创建一个默认提示)
Jan 13 Javascript
使用jQuery同时控制四张图片的伸缩实现代码
Apr 19 Javascript
JS实现金额转换(将输入的阿拉伯数字)转换成中文的实现代码
Sep 30 Javascript
js几秒以后倒计时跳转示例
Dec 26 Javascript
js style动态设置table高度
Oct 21 Javascript
javascript基于prototype实现类似OOP继承的方法
Dec 16 Javascript
老生常谈JavaScript 函数表达式
Sep 01 Javascript
jQury Ajax使用Token验证身份实例代码
Sep 22 Javascript
node基于puppeteer模拟登录抓取页面的实现
May 09 Javascript
JavaScript中click和onclick本质区别与用法分析
Jun 07 Javascript
微信小游戏之使用three.js 绘制一个旋转的三角形
Jun 10 Javascript
javascript实现文字跑马灯效果
Jun 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
ASP和PHP都是可以删除自身的
2007/04/09 PHP
php session和cookie使用说明
2010/04/07 PHP
PHP中基于ts与nts版本- vc6和vc9编译版本的区别详解
2013/04/26 PHP
thinkphp 一个页面使用2次分页的实现方法
2013/07/15 PHP
PHP直接修改表内容DataGrid功能实现代码
2015/09/24 PHP
jquery中通过过滤器获取表单元素的实现代码
2011/07/05 Javascript
获取offsetTop和offsetLeft值的js代码(兼容)
2013/04/16 Javascript
jQuery制作仿腾讯web qq用户体验桌面
2013/08/20 Javascript
详解JavaScript中的4种类型识别方法
2015/09/14 Javascript
Javascript类型转换的规则实例解析
2016/02/23 Javascript
详解JavaScript对象的深浅复制
2017/03/30 Javascript
vue实现图片加载完成前的loading组件方法
2018/02/05 Javascript
ES6知识点整理之Proxy的应用实例详解
2019/04/16 Javascript
vue实现简单加法计算器
2020/10/22 Javascript
python实现决策树
2017/12/21 Python
Python+OpenCV实现车牌字符分割和识别
2018/03/31 Python
python 遍历列表提取下标和值的实例
2018/12/25 Python
django框架model orM使用字典作为参数,保存数据的方法分析
2019/06/24 Python
python如何给字典的键对应的值为字典项的字典赋值
2019/07/05 Python
python自动结束mysql慢查询会话的实例代码
2019/10/27 Python
pandas factorize实现将字符串特征转化为数字特征
2019/12/19 Python
python读取xml文件方法解析
2020/08/04 Python
PyCharm安装PyQt5及其工具(Qt Designer、PyUIC、PyRcc)的步骤详解
2020/11/02 Python
HTML5 canvas实现移动端上传头像拖拽裁剪效果
2016/03/14 HTML / CSS
canvas离屏技术与放大镜实现代码示例
2018/08/31 HTML / CSS
瑞士香水购物网站:Parfumcity.ch
2017/01/14 全球购物
副总经理工作职责
2013/11/28 职场文书
经贸日语专业个人求职信
2013/12/13 职场文书
家长会学生家长演讲稿
2013/12/29 职场文书
体育教师自我鉴定
2014/02/12 职场文书
驾驶员培训方案
2014/05/01 职场文书
保护环境标语
2014/06/09 职场文书
员工工作自我评价
2014/09/26 职场文书
社会治安综合治理责任书
2015/01/29 职场文书
使用qt quick-ListView仿微信好友列表和聊天列表的示例代码
2021/06/13 Python
CSS基础详解
2021/10/16 HTML / CSS