angluarJs与后台交互get
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{margin: ;
padding: ; list-style: none}
.con{
width: 408px;
height: 300px;margin: 50px auto ;
border: 1px solid red; collapse: collapse }
.nav:after{
content: ''; display: block; clear: both;
}
.nav li{
float: left;width: 100px;
height: 30px;text-align: center;
line-height: 30px;
border: 1px solid red;
}
#a1 .a1,#a2 .a2,#a3 .a3,#a4 .a4{
background: aquamarine;
color: #fff;
}
</style>
</head>
<body>
<div class="con" ng-controller="cotr1" ng-init="active='a1'">
<ul class="nav" id="{{active}}">
<li ng-click="active='a1'" class="a1">热门</li>
<li ng-click="active='a2'" class="a2">头条</li>
<li ng-click="active='a3'" class="a3">财经</li>
<li ng-click="active='a4'" class="a4">娱乐</li>
</ul>
<div ng-show="active=='a1'">
<ul>
<li ng-repeat="item in data.a1">
<a href="{{url}}">{{item.title}}</a>
</li>
</ul>
</div>
<div ng-show="active=='a2'">
<ul>
<li ng-repeat="item in data.a2">
<a href="{{url}}">{{item.title}}</a>
</li>
</ul>
</div>
<div ng-show="active=='a3'">
<ul>
<li ng-repeat="item in data.a3">
<a href="{{url}}">{{item.title}}</a>
</li>
</ul>
</div>
<div ng-show="active=='a4'">
<ul>
<li ng-repeat="item in data.a4">
<a href="{{url}}">{{item.title}}</a>
</li>
</ul>
</div> </div>
<script src="angular-1.3.0.js"></script>
<script>
var app=angular.module("myApp",[]);
app.controller("cotr1",function ($scope,$http) { $http.get("http://qd.baidu.com/tgr/api/index.aspx?day=82&type=tabs").success(function (data) {
$scope.data=data;
})
});
</script>
</body>
</html>
<!DOCTYPE html>
<htmllang="en"ng-app="myApp">
<head>
<metacharset="UTF-8">
<title>Title</title>
<style>
*{margin:0;
padding:0; list-style: none}
.con{
width:408px;
height:300px;margin:50pxauto;
border:1px solid red; collapse: collapse }
.nav:after{
content:''; display: block; clear: both;
}
.nav li{
float: left;width:100px;
height:30px;text-align: center;
line-height:30px;
border:1px solid red;
}
#a1 .a1,#a2 .a2,#a3 .a3,#a4 .a4{
background: aquamarine;
color:#fff;
}
</style>
</head>
<body>
<divclass="con"ng-controller="cotr1"ng-init="active='a1'">
<ulclass="nav"id="{{active}}">
<ling-click="active='a1'"class="a1">热门</li>
<ling-click="active='a2'"class="a2">头条</li>
<ling-click="active='a3'"class="a3">财经</li>
<ling-click="active='a4'"class="a4">娱乐</li>
</ul>
<divng-show="active=='a1'">
<ul>
<ling-repeat="item in data.a1">
<ahref="{{url}}">{{item.title}}</a>
</li>
</ul>
</div>
<divng-show="active=='a2'">
<ul>
<ling-repeat="item in data.a2">
<ahref="{{url}}">{{item.title}}</a>
</li>
</ul>
</div>
<divng-show="active=='a3'">
<ul>
<ling-repeat="item in data.a3">
<ahref="{{url}}">{{item.title}}</a>
</li>
</ul>
</div>
<divng-show="active=='a4'">
<ul>
<ling-repeat="item in data.a4">
<ahref="{{url}}">{{item.title}}</a>
</li>
</ul>
</div>
</div>
<scriptsrc="angular-1.3.0.js"></script>
<script>
var app=angular.module("myApp",[]);
app.controller("cotr1",function($scope,$http){
$http.get("http://qd.baidu.com/tgr/api/index.aspx?day=82&type=tabs").success(function(data){
$scope.data=data;
})
});
</script>
</body>
</html>
angluarJs与后台交互get的更多相关文章
- angluarJs与后台交互小案例
.myService.html: <!DOCTYPE HTML> <html ng-app="app"> <head> <title> ...
- Ztree的简单使用和后台交互的写法（二）
针对Ztree的简单使用和后台交互的写法(一)中的树进行改进 1.增加节点的权限 由页面的当前用户,决定树的根节点 然后动态获取树的详细节点: 初始化函数为: function init(){ //初 ...
- Extjs 4.2 Grid增删改及后台交互(Java)
上次发了Easyui Datagrid的增删改查的使用学习记录后一直想整理下基于Extjs4.2的Grid学习使用记录.苦于抽不出时间,一直拖到现在.不得不说,Extjs确实很强大,新版的Neptun ...
- JSON数据格式以及与后台交互数据转换实例
/* 作者:烟大阳仔 时间:20131013 介绍:主要了解一下json的格式,看看数据是怎么存储的 */ <!DOCTYPE html PUBLIC "-//W3C//DTD HTM ...
- ajax简单后台交互
ajax简单后台交互 1,扯淡 单身的生活,大部分时间享受自由,小部分时间忍受寂寞. 生活有时候,其实蛮苦涩,让人难以下咽.那些用岁月积累起来的苦闷,无处宣泄,在自己的脑海里蔓延成一片片荆棘,让你每每 ...
- 通过ajax前端后台交互/登录页和注册页前端后台交互详解/前端后台交互基础应用/几个后台函数的基础应用/php文件函数基础应用/php字符传函数基础应用/php数组函数基础应用
前 言 PHP 学习了好久的PHP,今天做一个可以后台交互的登录页和注册页,没做什么判断,简单的了解一下. 具体的内容分析如下: ① PHP中的数据传输-->>由注册页传输 ...
- 如何用CropBox实现头像裁剪并与java后台交互
如何用CropBox实现头像裁剪并与java后台交互 参考网站:https://developer.mozilla.org/zh-CN/docs/Web/API/Blob 参考: http://blo ...
- js与后台交互详述（入门篇）
很多新手前端在初期学习的时候往往把注意力放在如何编写页面,如何编写效果上,群里有个朋友问我js是如何与后台交互的,我简单的说一下. 首先需要知道两个东西,一个是客户端,一个是服务器,客户端其实就是我们 ...
- ECharts 与struts的后台交互之柱状图
ECharts主页: http://echarts.baidu.com/index.html ECharts-2.1.8下载地址: http://echarts.baidu.com/build/e ...
随机推荐
- UNIX 网络编程学习
a.述 书买很久了,好好学习下.O(∩_∩)O 只写程序,原理什么的,先不写了. b.环境 deepin15.4.1 64位 vs code gcc version 6.4.0 20170724 ( ...
- Resin 的watchdog(看门狗)介绍和resin负载均衡实现
为了稳定和安全,Resin使用一个独立的watchdog进程来启动和监视Resin服务器.watchdog连续你检测Resin服务器的状态,如果其没有反应或者迟钝,将会重启Resin服务器进程.大多数 ...
- POJ1039几何
这道题目要求我们判断光线进入一条管道后可以抵达的最大的x坐标. 这是我做的第一道几何题目,卡了我半天.翻了不少书,才大概明白了些.既然是第一次做,就把所有今天学到的就全部写下好了. 1.如何判断平面上 ...
- Apache fcgistarter命令
一.简介 fcgistarter命令用于启动FastCGI程序. 二.语法 fcgistarter -c command -p port [ -i interface ] -N num 参考:http ...
- Celery笔记
异步任务神器 Celery 简明笔记 2016/12/19 · 工具与框架 · Celery, 异步 原文出处: FunHacks 在程序的运行过程中,我们经常会碰到一些耗时耗资源的操作,为了避 ...
- IIS关闭Trace、OPTIONS方法
方法(1):web.config 在<configuration>节点下添加如下代码: <system.webServer> <security> <requ ...
- Install zlib/libpng/jpeg/freetype/libgd/GD on Mavericks即mac10.9(转）
转自:http://wangqinhu.com/install-gd-on-mavericks/ Various applications depend on library GD, however, ...
- Java 并行和并发
并行:指两个或多个事件在同一时刻点进行. 并发:指两个或多个事件在同一时间段进行.
- POJ1062 昂贵的聘礼(带限制的spfa)
Description 年轻的探险家来到了一个印第安部落里.在那里他和酋长的女儿相爱了,于是便向酋长去求亲.酋长要他用10000个金币作为聘礼才答应把女儿嫁给他.探险家拿不出这么多金币,便请求酋长降低 ...
- 替归算法获取Treeview所有节点
treeview.nodes是获取下一级所有子节点,但是如果是多层的话,就不能,想个法子来获取所有的节点(含节点的子节点),想了想 还是替归算法比较方便,如是有了下面的代码 public static ...