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 控制非法字符的输入代码
Dec 04 Javascript
Jquery.TreeView结合ASP.Net和数据库生成菜单导航条
Aug 27 Javascript
jquery text()方法取标签中的文本
Jul 25 Javascript
jQuery实现分章节锚点“回到顶部”动画特效代码
Oct 23 Javascript
jQuery.form.js插件不能解决连接超时(timeout)的原因分析及解决方法
Oct 14 Javascript
聊聊JavaScript如何实现继承及特点
Apr 07 Javascript
js es6系列教程 - 新的类语法实战选项卡(详解)
Sep 02 Javascript
Vue项目webpack打包部署到Tomcat刷新报404错误问题的解决方案
May 15 Javascript
微信小程序按钮点击动画效果的实现
Sep 04 Javascript
vue与django集成打包的实现方法
Nov 11 Javascript
Vuex的API文档说明详解
Feb 05 Javascript
在vue项目中封装echarts的步骤
Dec 25 Vue.js
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 已经成熟
2006/12/04 PHP
destoon利用Rewrite规则设置网站安全
2014/06/21 PHP
PHP时间日期增减操作示例【date strtotime实现加一天、加一月等操作】
2018/12/21 PHP
PHP抽象类与接口的区别详解
2019/03/21 PHP
如何让您的中波更粗更长 - 中波框形天线制作
2021/03/10 无线电
同一个表单 根据要求递交到不同页面的实现方法小结
2009/08/05 Javascript
javascript学习笔记(七)利用javascript来创建和存储cookie
2011/04/08 Javascript
JS利用cookie记忆当前位置的防刷新导航效果
2015/10/15 Javascript
JavaScript获取当前cpu使用率的方法
2015/12/15 Javascript
DeviceOne 让你一见钟情的App快速开发平台
2016/02/17 Javascript
浅谈JavaScript前端开发的MVC结构与MVVM结构
2016/06/03 Javascript
使用contextMenu插件实现Bootstrap table弹出右键菜单
2017/02/20 Javascript
Vue中的v-cloak使用解读
2017/03/27 Javascript
Vue中引入样式文件的方法
2017/08/18 Javascript
详解Vue.js组件可复用性的混合(mixin)方式和自定义指令
2017/09/06 Javascript
Nodejs 和 Electron ubuntu下快速安装过程
2018/05/04 NodeJs
Vue组件全局注册实现警告框的实例详解
2018/06/11 Javascript
layer.open提交子页面的form和layedit文本编辑内容的方法
2019/09/27 Javascript
Bootstrap table 服务器端分页功能实现方法示例
2020/06/01 Javascript
Vue3为什么这么快
2020/09/23 Javascript
Java 生成随机字符的示例代码
2021/01/13 Javascript
[02:38]2018DOTA2亚洲邀请赛赛前采访-VGJ.T
2018/04/03 DOTA
python中类的一些方法分析
2014/09/25 Python
Python字符串、元组、列表、字典互相转换的方法
2016/01/23 Python
Python + selenium自动化环境搭建的完整步骤
2018/05/19 Python
Python开发最牛逼的IDE——pycharm
2018/08/01 Python
Python 获取numpy.array索引值的实例
2019/12/06 Python
Python 实现将数组/矩阵转换成Image类
2020/01/09 Python
Pytorch 实现数据集自定义读取
2020/01/18 Python
python lambda函数及三个常用的高阶函数
2020/02/05 Python
Python爬虫基于lxml解决数据编码乱码问题
2020/07/31 Python
利用python实现汉诺塔游戏
2021/03/01 Python
Origins悦木之源英国官网:雅诗兰黛集团高端植物护肤品牌
2017/11/06 全球购物
Python 如何实现文件自动去重
2021/06/02 Python
pycharm部署django项目到云服务器的详细流程
2021/06/29 Python
阿里云服务器(windows)手动部署FTP站点详细教程
2022/08/05 Servers