相比较jquery ,angular对这种接口数据处理起来会方便的多。这里举例调用 中国天气网的api接口。

首先肯定要引入angular.js这个不多说

<link rel="stylesheet" href="css/bootstrap.css" type="text/css"></link>
<script type="text/javascript" src="./js/angular.js"></script>

其次js代码如下:

    var app = angular.module("myApp", []);
app.controller("myCtrl", ['$scope','$http', function($scope,$http) {
var url='http://wthrcdn.etouch.cn/weather_mini?city='+'北京';
$http.get(url).then(function (response) {
$scope.cityname=response.data.data.city
$scope.myweather= response.data.data.forecast;
}); }]);

用ng-app管理angularjs 作用范围,控制器ng-controller这个去写你的方法。这些都是必须的
div代码:

<body  ng-app="myApp">
<div ng-controller="myCtrl">
<div>
<p style="font-size: 18px;text-align: center;font-weight: 600; color: rgb(200,10,10)">{{cityname}}</p>
<table class="table" id="tale">
<th>日期</th>
<th>风力</th>
<th>风向</th>
<th>最高温度</th>
<th>最低温度</th>
<th>天气状况</th>
<tr ng-repeat="i in myweather ">
<td>{{i.date}}</td>
<td>{{i.fengli}}</td>
<td>{{i.fengxiang}}</td>
<td>{{i.high}}</td>
<td>{{i.low}}</td>
<td>{{i.type}}</td>
</tr>
</table>
</div>
</body>

这里非常方便的是这个 :ng-repeat,循环打印出你想打印的数据。当然你们以后肯定会遇到类似这种:

这是因为你的数组中存在相同数据,所以你只需要在 ng-repeat中加入"track by $index"就好了, 例如ng-repeat=" i in  你的数据   track by $index" 。

页面展示如下:

本文属作者原创,如有转载请标明文章出处:http://www.cnblogs.com/mobeisanghai/p/7459020.html
作者:漠北桑海

angularJS简单调用接口,实现数组页面打印的更多相关文章

  1. js调用页面打印

    ----------------------调用页面打印-------------------------------- <body> <div id="divPrint& ...

  2. loadrunner做webservice接口之简单调用

    今天听大神讲了webservice做接口,我按照他大概讲的意思自己模拟实战了下,可能还有很多不对,一般使用webservice做接口,会使用到soapui,但是用了loadrunner以后发现lr很快 ...

  3. Ajax异步调用http接口后刷新页面

    使用Ajax的目的就是提高页面响应速度,无需同步调用,无需整个页面刷新.这里直接在html中使用js来实现: 先获取XMLHttpRequest对象 var xmlHttp; //创建一个xmlHtt ...

  4. http-get调用接口简单代码

    一.简单便捷的httpget调用接口,并且返回接口数据1.导入相应的jar包: 2.代码如下: HttpGet get=null; try {HttpClient httpClient = new D ...

  5. http-post调用接口简单代码

    一.简单便捷的httpget调用接口,并且返回接口数据1.导入相应的jar包: 2.代码如下: HttpPost post = null; try { HttpClient httpClient = ...

  6. js数字转金额,ajax调用接口,后台返回html(完整页面),打开新窗口并写入html

    一.转换成金额形式 function toMoney(num){ if(num){ if(isNaN(num)) { alert("金额中含有不能识别的字符"); return; ...

  7. vue 配合vue-resource调用接口,获取数据

    1.先用node+express+mysql简单配置一下后台 const express = require('express');const mysql = require('mysql');con ...

  8. Web系统页面打印技术实现与分析

    1 Web页面打印概述应用WEB化,不论对开发商,还是对用户来说,实在是一种很经济的选择,因为基于WEB的应用,客户端的规则很简单,容易学习,容易维护,容易发布.在WEB系统中,打印的确是个烦人的问题 ...

  9. 使用HBuilder开发移动APP:ajax调用接口数据

    既然要做APP,与接口交互式少不了的,除非只是想做一个纯静态的APP.所以html5+的环境准备好后,我最先开始研究的就是如何与接口交互. 使用HBuilder新建示例教程后,里面会有一个ajax(网 ...

随机推荐

  1. AI翻译离无障碍交流有多远

    AI翻译服务通过硬件.软件连接千千万万个应用场景,会打破语言不通的尴尬局面吗?会是人工翻译的终结者吗? 世界这么大,我想去看看!十一长假临近,梦想中的你背起行囊,自由行走在异国的大街小巷.然而现实的画 ...

  2. Sketch设计学习(一)

    很膜拜那些既能写出一手好代码,并且还能够懂设计懂交互的人.公司基本上都对这两块工作 分工分职,但是我觉得作为一名移动开发者,懂点设计 是必备的. 国外的很多大牛们,感觉他们虐我们千百遍了. 我觉得写代 ...

  3. 给资源文件添加指纹(Gulp版)

    至于为什么要费尽心思地给文件添加指纹,请参看前端静态资源缓存控制策略.这次要达到的小目标就是生成的资源文件能够被客户端缓存,而在文件内容变化后,能够请求到最新的文件. 需要用到的 gulp 插件是 g ...

  4. JavaScript--我发现,原来你是这样的JS:面向对象编程OOP[1]--(理解对象和对象属性类型)

    一.介绍 老铁们,这次是JS的面向对象的编程OOP(虽然我没有对象,心累啊,但是可以自己创建啊,哈哈). JS高程里第六章的内容,这章内容在我看来是JS中很难理解的一部分.所以分成三篇博客来逐个理清. ...

  5. 三种方式打印杨辉三角形(JAVA实现)

    //采用一个二维数组打印杨辉三角 class Yanghui1 { public static void main(String[] args) { //设置杨辉三角的行数 int num = 10; ...

  6. 一款超好用轻量级JS框架——Zepto.js(上)

       前  言 絮叨絮叨 之前我们介绍过JQuery怎么自定义一个插件,但没有详细介绍过JQuery,那么今天呢....我们还是不说JQuery,哈哈哈哈 但是今天我们介绍一款和JQuery超级像的一 ...

  7. Luogu 2296 寻找道路

    https://www.luogu.org/problemnew/show/2296 题目描述 在有向图G 中,每条边的长度均为1 ,现给定起点和终点,请你在图中找一条从起点到终点的路径,该路径满足以 ...

  8. 百度Echarts导入

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  9. 《Linux命令行与shell脚本编程大全》 第六章环境变量

    很多程序和脚本都通过环境变量来获取系统信息.存储临时数据和配置信息. 6.1 什么是环境变量: bash shell用一个叫环境变量(environment variable)的特性来存储有关shel ...

  10. 由Python通过__new__实现单例模式,所想到的__new__和__init__方法的区别

    之前通过读书,了解到在Python中可以通过__new__方法来实现单例模式,代码一个示例如下,我就有了几个疑问,什么是单例模式?__new__方法是用来做什么的?用__new__方法实现的单例模式, ...