<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;padding: 0;list-style: none;
}
#wrap{
width: 500px;margin: 20px auto;
}
.nav{
width: 100%;height: 50px;overflow: hidden;background: dodgerblue;
}
.nav li{
float: left;margin-left: 20px;width: 40px;height: 40px;background-color: cornflowerblue;margin-top: 5px;
}
.nav li:nth-child(1){
background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkYzNkFCQ0ZBMTBCRTExRTM5NDk4RDFEM0E5RkQ1NEZCIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkYzNkFCQ0ZCMTBCRTExRTM5NDk4RDFEM0E5RkQ1NEZCIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6RjM2QUJDRjgxMEJFMTFFMzk0OThEMUQzQTlGRDU0RkIiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6RjM2QUJDRjkxMEJFMTFFMzk0OThEMUQzQTlGRDU0RkIiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7h1bLqAAAAWUlEQVR42mL8////BwYGBn4GCACxBRlIAIxAA/4jaXoPEkMyjJ+A/g9MDJQBRhYg8RFqMwg8RJIUINYLFDmBUi+ADQAF1n8ofk9yIAy6WPg4GgtDMRYAAgwAdLYwLAoIwPgAAAAASUVORK5CYII=);
background-size: 100% 100%;
}
.nav li:nth-child(2){
background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjBEQkMyQzE0MTBCRjExRTNBMDlGRTYyOTlBNDdCN0I4IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjBEQkMyQzE1MTBCRjExRTNBMDlGRTYyOTlBNDdCN0I4Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MERCQzJDMTIxMEJGMTFFM0EwOUZFNjI5OUE0N0I3QjgiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MERCQzJDMTMxMEJGMTFFM0EwOUZFNjI5OUE0N0I3QjgiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4MjPshAAAAXklEQVR42mL4////h/8I8B6IGaCYKHFGEMnAwCDIAAHvgZgRyiZKnImBQsACxB+hNoDAQyQ5osQZIT4gH1DsBZABH6AB8x/JaQzEig++WPiII7Rxio/GwmCIBYAAAwAwVIzMp1R0aQAAAABJRU5ErkJggg==);
background-size: 100% 100%;
}
#a1 .a1,#a2 .a2{
background-color: red;
}
.con img{
width: 100px;height: 80px;float: left;
}
.con{
overflow: hidden;padding: 10px 0;
}
.p1{
width: 390px;line-height: 50px;font-size: 16px;float: right;font-weight: 400;
padding-left: 10px;
}
.p2{
width: 390px;line-height: 30px;float: right;padding-left: 10px;font-size: 14px;
}
.cube{
float: left;width: 230px;height: 200px;padding: 5px 10px;
}
.cube img{
width: 100%;height: 100%;
}
.out{
overflow: hidden;
}
</style>
</head>
<body>
<div id="wrap" ng-controller="ctrl">
<!--{{data}}-->
<ul class="nav" id="{{act}}">
<li ng-click="act='a1'" class="a1"></li>
<li ng-click="act='a2'" class="a2"></li>
</ul>
<div ng-show="act=='a1'">
<div ng-repeat="x in data" class="con">
<img ng-src="{{x.image}}" alt="">
<p class="p1">{{x.title}}</p>
<p class="p2">{{x.date}}</p>
</div>
</div>
<div ng-show="act=='a2'" class="out">
<div ng-repeat="y in data" class="cube">
<img ng-src="{{y.image}}" alt="">
</div>
</div>
</div>
<script src="../angular-1.3.0.js"></script>
<script>
var app=angular.module('myApp',[]);
app.controller('ctrl',function ($scope,$http) {
$scope.act="a1";
$http.get("http://qd.bokanedu.com/tgr/api/index.aspx?day=82&type=search").success(function (data) {
$scope.data=data;
})
})
</script>
</body>
</html>

angular 后台交换实例的更多相关文章

  1. JS常用方法总结，及jquery异步调用后台方法实例

    //前台接收get参数值 function getQueryString(name) {            var queryStrings = window.location.search.sp ...

  2. angular.js 教程 -- 实例讲解

    angular.js AngularJS [1] 诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀的前端JS框架,已经被用于Google的多款产品当中.Ang ...

  3. angular.extend用法实例

      angular.extend:依次将第二个参数及后续的参数的第一层属性(不管是简单属性还是对象)拷贝赋给第一个参数的第一层属性,即如果是对象,则是引用的是同一个对象,并返回第一个参数对象. 实例一 ...

  4. Angular——单页面实例

    基本介绍 1.引入的route模块可以对路由的变化做出响应 2.创建的控制器中依然需要$http向后台请求数据 3.php中二维数据的遍历用的是foreach 4.php中$arr=array(),$ ...

  5. angular的小实例

    主要是使用了angular的指令. 学习地址:http://www.runoob.com/angularjs/angularjs-tutorial.html 1. 效果: 输入数据剩余字数会相应减少, ...

  6. 52ABP模板 ASP.Net Core 与 Angular的开源实例项目

    阅读文本大概需要 5 分钟. 开始之前 自从上一篇文章".NET:持续进化的统一开发平台"发布后,已经有三个月的时间没有写过文章了. 这段时间,做了两场线下活动,一场在上海,一场在 ...

  7. Angular ng-include 学习实例

    ng-include 可以引入外部的文件到当前视图中.这样可以增强复用性. 最简单的用法  <div ng-include src="'/public/template/tpl.htm ...

  8. Angular 路由route实例

    iSun Design & Code AngularJS - 路由 routing 基础示例 AngularJS 路由 routing 能够从页面的一个视图跳转到另外一个视图,对单页面应用来讲 ...

  9. asp.net中通过form表单submit提交到后台的实例

    前台<body>中的代码: <body> <div id="top"> </div> <form id="login ...

随机推荐

  1. vmware中两台虚拟机互相访问

    hosts文件   简单说,就是本来访问某个机器是通过其ip,在hosts文件中给ip对应一个名字,那么就可以通过名字来替代ip去访问该机器了(名字显然比ip好记) 环境:宿主机win10系统,安装了 ...

  2. 【java基础学习】反射

    1. 什么是反射 Class.Method.Field.Constructor,它们是反射对象.它们是类.方法.成员变量.构造器,在内存中的形式. 也就是万物皆对象!类是类型.方法是类型.成员变量是类 ...

  3. Spring的IOC原理(转载)

    在网上看到一篇文章,感觉写得挺不错的,转载一下,本文转载自:http://www.cnblogs.com/xdp-gacl/p/3707631.html 一. IoC理论的背景 我们都知道,在采用面向 ...

  4. 深入解析PHP中逗号与点号的区别

    大部分同学都知道逗号要比点号快,但就是不知道为什么,更不知道逗号与点号这两者之间到底有什么区别.下面小编就来详细的为大家介绍一下,需要的朋友可以过来参考下 echo 'abc'.'def'; //用点 ...

  5. windows 系统时钟

    偶然发现了一个函数用以查询操作系统的时钟间隔: BOOL WINAPI GetSystemTimeAdjustment( _Out_ PDWORD lpTimeAdjustment, _Out_ PD ...

  6. js自定义弹出框

    js自定义弹出框: 代码如下 <html> <head><title>自定义弹出对话框</title> <style type ="te ...

  7. cloudera learning3:Hadoop配置和守护进程logs

    Services:Haddoop cluster上可以部署的组件,比如HDFS,YARN,HBase等. Roles:在service配置时,由Cloudera Manager创建.比如NameNod ...

  8. AppScan漏洞“已解密的登陆请求”修复解决方案

    最近在修复系统漏洞时,使用新版AppScan扫描IIS站点(WebForm)出现一个严重漏洞“已解密的登陆请求”. 扫描工具修复的建议为在登陆界面不使用含“password”类型的控件或加密录入参数. ...

  9. Mysql查看版本，端口命令

    有一段时间没有鼓捣TP了,今天又再复习一下.在Model获取数据的时候提示'MySQL server has gone away'错误,一开始以为是TP问题,还查了半天,后来才发现是配置mysql的时 ...

  10. iOS计算完整文字高度(适应iOS 10)

    动态计算文字的高度:(切记LineSapcing>=2,不然会显示不全) +(CGSize) boundingALLRectWithSize:(NSString*) txt Font:(UIFo ...