相比较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. 读书笔记-你不知道的JS上-this

    关于this 与静态词法作用域不用,this的指向动态绑定,在函数执行期间才能确定.感觉有点像C++的多态? var a = 1; var obj = { a: 2, fn: function() { ...

  2. Winsock网络编程笔记（1）----入门

    今天第一次接触winsock网络编程,看的资料是Windows网络编程第二版.通过博客记住自己的看书笔记.. 在这里贴出第一个程序,虽然程序什么都没做,但以此作为入门,熟悉其网络编程风格.. #inc ...

  3. LR多分类推广 - Softmax回归*

    LR是一个传统的二分类模型,它也可以用于多分类任务,其基本思想是:将多分类任务拆分成若干个二分类任务,然后对每个二分类任务训练一个模型,最后将多个模型的结果进行集成以获得最终的分类结果.一般来说,可以 ...

  4. Android 开发笔记___SD卡基本操作

    package com.example.alimjan.hello_world; /** * Created by alimjan on 7/5/2017. */ import android.ann ...

  5. 蓝桥杯-算法训练--ALGO-8 操作格子

    问题描述 有n个格子,从左到右放成一排,编号为1-n. 共有m次操作,有3种操作类型: 1.修改一个格子的权值, 2.求连续一段格子权值和, 3.求连续一段格子的最大值. 对于每个2.3操作输出你所求 ...

  6. form 表单处理

    submit相关 当使用 submit 按钮或者 image  或者button type="submit"   来提交表单时,会触发 submit 事件,但是直接javascri ...

  7. Browsing contexts 浏览器上下文

    浏览上下文就是document object 呈现给用户的所在的环境   每一个标签或者窗口都包含一个浏览器上下文,包括iframe   frames      每一个browsing context ...

  8. Webpack 入门教程

    Webpack 是一个前端资源加载/打包工具.它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源. 本章节基于 Webpack3.0 测试通过. 从图中我们可以看出,W ...

  9. 轻松驾驭Tomcat

    Tomcat 服务器是一个免费的开放源代码的Web 应用服务器,属于轻量级应用服务器,在中小型系统和并发访问用户不是很多的场合下被普遍使用,是开发和调试JSP 程序的首选.对于一个初学者来说,可以这样 ...

  10. GCC 中的编译器堆栈保护技术

    GCC 中的编译器堆栈保护技术 前几天看到的觉得不错得博客于是转发了,但这里我补充一下一些点. GCC通过栈保护选项-fstack-protector-all编译时额外添加两个符号,__stack_c ...