<!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的更多相关文章

  1. angluarJs与后台交互小案例

    .myService.html: <!DOCTYPE HTML> <html ng-app="app"> <head> <title> ...

  2. Ztree的简单使用和后台交互的写法（二）

    针对Ztree的简单使用和后台交互的写法(一)中的树进行改进 1.增加节点的权限 由页面的当前用户,决定树的根节点 然后动态获取树的详细节点: 初始化函数为: function init(){ //初 ...

  3. Extjs 4.2 Grid增删改及后台交互(Java)

    上次发了Easyui Datagrid的增删改查的使用学习记录后一直想整理下基于Extjs4.2的Grid学习使用记录.苦于抽不出时间,一直拖到现在.不得不说,Extjs确实很强大,新版的Neptun ...

  4. JSON数据格式以及与后台交互数据转换实例

    /* 作者:烟大阳仔 时间:20131013 介绍:主要了解一下json的格式,看看数据是怎么存储的 */ <!DOCTYPE html PUBLIC "-//W3C//DTD HTM ...

  5. ajax简单后台交互

    ajax简单后台交互 1,扯淡 单身的生活,大部分时间享受自由,小部分时间忍受寂寞. 生活有时候,其实蛮苦涩,让人难以下咽.那些用岁月积累起来的苦闷,无处宣泄,在自己的脑海里蔓延成一片片荆棘,让你每每 ...

  6. 通过ajax前端后台交互/登录页和注册页前端后台交互详解/前端后台交互基础应用/几个后台函数的基础应用/php文件函数基础应用/php字符传函数基础应用/php数组函数基础应用

      前  言  PHP     学习了好久的PHP,今天做一个可以后台交互的登录页和注册页,没做什么判断,简单的了解一下. 具体的内容分析如下: ① PHP中的数据传输-->>由注册页传输 ...

  7. 如何用CropBox实现头像裁剪并与java后台交互

    如何用CropBox实现头像裁剪并与java后台交互 参考网站:https://developer.mozilla.org/zh-CN/docs/Web/API/Blob 参考: http://blo ...

  8. js与后台交互详述（入门篇）

    很多新手前端在初期学习的时候往往把注意力放在如何编写页面,如何编写效果上,群里有个朋友问我js是如何与后台交互的,我简单的说一下. 首先需要知道两个东西,一个是客户端,一个是服务器,客户端其实就是我们 ...

  9. ECharts 与struts的后台交互之柱状图

    ECharts主页:  http://echarts.baidu.com/index.html ECharts-2.1.8下载地址:  http://echarts.baidu.com/build/e ...

随机推荐

  1. 在ubuntu中安装minicom时出现devic…

    未正常关闭minicom yesaidu@ywf-ubuntu: ~$ ls /var/lock LCK..ttyS0  subsys yesaidu@ywf-ubuntu: ~$ kill 0 ye ...

  2. Laravel 5.3 auth中间件底层实现详解(转)

    1. 注册认证中间件, 在文件 app/Http/Kernel.php 内完成: protected $routeMiddleware = [ 'auth' => \Illuminate\Aut ...

  3. 4-2 线程安全性-原子性-atomic-2

    AtomicReference和AtomicLong.AtomicInteger很像,方法也基本上是一样的,然后我们通过引用Integer来做一个简单的例子. com.mmall.concurrenc ...

  4. C++获取时间并命名为文件名

    #include <time.h> char pStrPath1[20];time_t currTime;struct tm *mt;Mat saveImg1; currTime = ti ...

  5. css常见问题解决方法

    设置方法: div内的img和span都需要设置vertical-align:middle; 解决inline-block的空格: http://www.w3cplus.com/css/fightin ...

  6. Linux tmux

    一.简介 Tmux是一个用于终端复用的软件,它允许一个用户在一个终端窗口或远程终端会话中使用多个不同的终端会话.在同一个命令行接口处理多个程序,以及将程序从已经开始运行另外的程序的Unix shell ...

  7. Linux 的文件系统

    Linux 文件属性 文件属性示意图 第一栏代表这个文件的类型与权限(permission): FHS Filesystem Hierarchy Standard(文件系统层次化标准) 1. / (r ...

  8. 线程同步synchronized，wait，notifyAll 测试示例

    https://www.cnblogs.com/LipeiNet/p/6475851.html 一  synchronized synchronized中文解释是同步,那么什么是同步呢,解释就是程序中 ...

  9. location.reload() 和 location.replace()的区别和应用

    首先介绍两个方法的语法: reload 方法,该方法强迫浏览器刷新当前页面.语法: location.reload([bForceGet]) 参数: bForceGet, 可选参数, 默认为 fals ...

  10. 当Linux用尽内存

    Mulyadi Santosa 也许你很少面临这一情况,但是一旦如此,你一定知道出什么错了:可用内存不足或者说内存用尽(OOM).结果非常典型:你不能再分配内存,内核会杀掉一个任务(一般是正在运行那个 ...