angularJS简单掉用接口,实现数组页面打印

相比较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" 。

页面展示如下:

时间: 2024-08-14 20:27:51

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

使用c#反射实现接口可视化调试页面

直接上代码,引用CommTools.dll.包括aspx显示页面和aspx.cs获取反射数据源代码 1 using System; 2 using System.Collections.Generic; 3 using System.Linq; 4 using System.Web; 5 using System.Web.UI; 6 using System.Web.UI.WebControls; 7 using CommTools; 8 9 namespace WebAppReflector

(java)selenium webdriver学习---实现简单的翻页,将页面内容的标题和标题链接取出

selenium webdriver学习---实现简单的翻页,将页面内容的标题和标题链接取出: 该情况适合能能循环page=1~n,并且每个网页随着循环可以打开的情况, 注意一定是自己拼接的url可以打开,如:http://ask.testfan.cn/articles?page=15,就可以翻到文章分类的第15页: import java.io.File; import java.io.IOException; import java.util.ArrayList; import java.u

为什么需要RPC,而不是简单的HTTP接口

转载自:http://www.oschina.net/question/271044_2155059?sort=default&p=1#answers 目前有很多Java的RPC框架,有基于Json的,有基于XML,也有基于二进制对象的. 论复杂度,RPC框架肯定是高于简单的HTTP接口的.但毋庸置疑,HTTP接口由于受限于HTTP协议,需要带HTTP请求头,导致传输起来效率或者说安全性不如RPC. 现在问题是,遇到怎样的瓶颈了才需要或者说更适合用RPC(比如像阿里这么大的请求并发量,简单的HT

简单的登录接口

项目名称:简单的登录接口 项目要求: 1.输入用户名和用户密码 2.输入成功后会显示欢迎信息 3.三次输入失败后就会锁定用户 项目说明: 输入的用户名都是user.txt或者lock.txt文件中的用户名,如果输入的用户名不存在于这两个文件中就会提示输入的用户名不正确警告. 项目流程图: 项目代码: 1 #encoding=utf-8 2 __author__ = 'heng' 3 """ 4 -----------------------------------------

jQuery简单实现iframe的高度根据页面内容自适应的方法(转)

本文实例讲述了jQuery简单实现iframe的高度根据页面内容自适应的方法.分享给大家供大家参考,具体如下: 方式1: //注意:下面的代码是放在和iframe同一个页面中调用 $("#iframeId").load(function () { var mainheight = $(this).contents().find("body").height() + 30; $(this).height(mainheight); }); 方式2: //注意:下面的代码

使用jqprint插件完成页面打印

jqprint是一个基于jquery编写的页面打印的一个小插件,但是不得不承认这个插件确实很厉害,最近的项目中帮了我的大忙,在Web打印的方面,前端的打印基本是靠window.print()的方式进行打印的,而这个插件在其基础上进行了进一步的封装,可以打印网页上的某个区域,这是个亮点.比如说现在要打印如下的一个效果: 我们可以通过写代码完成上述的效果,然后单击网页上的某个按钮,在按钮的处理方法里调用jqprint(),来完成这个区域的的打印显示的操作,首先要获取这个区域,然后调用一个方法即可了,

WEB页面打印--打印指定区域,页面预览,页面设置

转载http://hi.baidu.com/zyb512/blog/item/e9cf70441ce0984a500ffe79.html 1.利用组件把报表的内容生成WORD文档或者是Excel文档,导出以后利用Office自带的打印功能进行打印 2.在网页上利用javascript或者是其他基于javascript和其他语言的组建 下面详细介绍这两种方法 1.生成word或者是Excel文档,当要打印的区域内容为文本的时候适合导出为Word文档来处理,当要打印的内容为表格的时候适合导出为Exc

ios CoreData 用父类的实例对象person接收存有子类的数组,打印person.class ,结果是子类类名?还是父类类名(已解决)

新建Person类 person的子类 Student Teacher 今天做数据库封装时想到的,因为查询出的结果都继承自NSManagerObject,但是他的子类属性又不一定一样,所以我就想我在在查询之后能不能判断他是那个子类并且按照子类的属性进行赋值,所以首先我要数组存的对象的类进行判断 测试如下:(把主要代码贡献如下,其他文件自己建议下吧,很简单) NSMutableArray * array = [NSMutableArray array]; NSMutableArray * arra

android网页打印,安卓网页打印,h5页面打印,浏览器打印,js打印工具

Android设备打印比较麻烦,一般设备厂商都提供原生app开发的SDK,我们web开发者为难了,不会原生开发啊 给大家提供一个思路,实现web加壳,利用打印浏览器实现 简单来说就是把我们的web页面嵌入浏览器中 web页面的打印功能通过js与浏览器互动 浏览器通过调用硬件SDK实现打印 1.机器安装最新SDK,已安装请忽略 2.下载安装本页下载连接中的打印浏览器并安装 3.对照下方事例代码,修改web页面打印功能 4.打印浏览器中打开web页面,测试打印功能 5.默认主页可以在SD卡根目录修改