1.angular中$http的服务：

　　$http.get(url,{params:{参数}}).success().error();

　　$http.post(url,{params:{参数}}).success().error();

　　$http.jsonp(url,{params:{wd:'',cb:'JSON_CALLBACK'}}).success().error();

　　注意jsonp中cb在angular中规定只能使用JSON_CALLBACK

　　$watch(谁，做什么，false)；

　　谁指的是需要监听谁，做什么指的是在监听对象发生改变的时候会触发的函数，最后一个参数布尔值，true表示深度监视，比如监听的是对象arr，在arr中的每一项发生改变的时候都会触发函数，true还表示可以监听多个，如果默认false的话，只能监听单个对象。

下面使用angular的jsonp来做了一个简单百度搜索下拉，原生的百度搜索下来再前面的文章中写过，有兴趣的可以搜一下看看

<!doctype html>

<html ng-app="text">

<head>

<meta charset="utf-8">

<title>angular百度下拉搜索</title>

<script src="angular.min.js"></script>

<script>

	var app=angular.module('text',[]);

	app.controller('cont',['$scope','$http',function($scope,$http){

		$scope.arr=[];

		//提前初始化数据，这里给一个初始值，否则刷新页面angular的脏检查会认为是失败

		$scope.str='';

		//注意在angular中不能使用angular以外的方法，例如这里使用jquery的$.ajax或者$.getScript会出现问题

		$scope.$watch('str',function(){

			$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{params:{

				wd:$scope.str,

				//angular规定cb必须是用"JSON_CALLBACK"

				cb:'JSON_CALLBACK'

			}}).success(function(json){

				$scope.arr=json.s;

			}).error(function(){

				alert('失败了');

			});

		});

	}]);

</script>

</head>

<body>

	<div ng-controller="cont">

    	<input type="text" ng-model="str"/>

        <ul>

        	<li ng-repeat="s in arr">{{s}}</li>

        </ul>

    </div>

</body>

</html>

　　

2.angular的选项卡，自己认为选项卡虽然简单，但是透过选项卡能展现很多东西的思路，这个angular的选项卡还是很简单的

<!doctype html>

<html ng-app="text">

<head>

<meta charset="utf-8">

<title>angular选项卡</title>

<script src="angular.js"></script>

<style>

*{

	padding:0;

	margin:0;

}

p{

	width:100px;

	height:100px;

	background:#ccc;

	border:1px solid #000;

}

.active{

	background:skyblue;

}

input{

	background:#333;

	color:#fff;

}

</style>

<script>

	var app=angular.module('text',[]);

	app.controller('cont1',['$scope',function($scope){

		//利用$scope.now来控制div的显示和隐藏

		$scope.now=0;

		$scope.arr=[

			{name:"音乐",content:"BEYOND不朽"},

			{name:"体育",content:"C罗是垃圾"},

			{name:"新闻",content:"物价还在上涨"},

		];

		//挂载一个函数过渡一下，解决ng-repeat和ng-事件同时出现的问题

		$scope.fn=function(n){

			$scope.now=n;

		};

	}]);

</script>

</head>

<body>

<div ng-controller="cont1">

	<!--注意在angular中ng-repeat和ng-事件同时出现会出现问题，解决办法是在$scope下挂载的函数中过渡一下-->

	<input ng-repeat="json in arr" type="button" value="{{json.name}}" ng-class="now==$index?'active':''" ng-click="fn($index)" />

    <p ng-repeat="json in arr" ng-show="now==$index">{{json.content}}</p>

</div>

</body>

</html>

　　

angular的跨域（angular百度下拉提示模拟）和angular选项卡的更多相关文章

  1. JSONP跨域访问百度实现搜索提示小案例

    一.JSONP简介 JSONP 全称 JSON with padding(填充式 JSON 或参数式 JSON),JSONP实现跨域请求的原理,就是动态创建<script>标签,然后利用& ...

  2. Ajax跨域：Jsonp实例--百度搜索框下拉提示

    Ajax跨域:Jsonp实例--百度搜索框下拉提示 一.总结 一句话总结:a.找好接口:b.用script标签的src引入文件(json数据):c.定义及实现上一步引入文件中的函数 1.如何找到一个网 ...

  3. angular 的跨域处理

    angular 的跨域处理,由于不并不支持跨域处理,所以我们对他也是无可奈何,angular 的跨域处理,需要我们在服务器上进行处理,把请求的数据改成 * ,也就是,谁都可以请求数据: angular ...

  4. Angular http跨域

    原文:Angular http跨域 - 飞翔的小仓鼠 - 博客园 var app = angular.module('Mywind',['ui.router']); app.controller('M ...

  5. vue实现百度搜索下拉提示功能

    这段代码用到vuejs和vue-resouece.实现对接智能提示接口,并通过上下键选择提示项,按enter进行搜索 <!DOCTYPE html> <html lang=" ...

  6. 【亲测好用！】shell批量采集百度下拉框关键词

    [亲测好用!]shell批量采集百度下拉框关键词 SEO工具  方法  11个月前 (11-18)  2153浏览 3条评论 百度已收录 一直想写一篇用shell采集百度下拉框关键词的教程,个人感觉用 ...

  7. 仿百度下拉关键词，和关键词的小demo

    自己做项目时用到的仿百度下拉关键词 代码: $(function(){ var oTxt = document.getElementById('search_text'); oTxt.onkeyup ...

  8. vue的jsonp百度下拉菜单

    通过vue的jsonp实现百度下拉菜单的请求,vue的版本是2.9.2 <!DOCTYPE html> <html lang="en"> <head& ...

  9. vue实现百度下拉框

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

随机推荐

  1. Scalaz（57）－ scalaz-stream: fs2-多线程编程，fs2 concurrency

    fs2的多线程编程模式不但提供了无阻碍I/O(java nio)能力,更为并行运算提供了良好的编程工具.在进入并行运算讨论前我们先示范一下fs2 pipe2对象里的一些Stream合并功能.我们先设计 ...

  2. [moka同学笔记]四、Yii2.0课程笔记（魏曦老师教程）[匿名函数的使用操作]

    在评论页面中index.php中 [ 'attribute'=>'status', 'value'=>'status0.name', 'filter'=>Commentstatus: ...

  3. PHP流程控制结构之分支结构

    流程控制对于任何一门编程语言来说都是具有通用与普遍性的,是程序的重要组成部分.可以这么说,在任何一门程序设计语言中,都需要支持三种基本结构:顺序结构.分支结构(选择结构或条件结构)和循环结构.对于顺序 ...

  4. 03-树1 树的同构 （C语言链表实现）

    #include <stdio.h> #include <stdlib.h> #include <string.h> #include <stdbool.h& ...

  5. MongoDB主从复制(主从集群 )

    1.简介 主从复制是MongoDB最常用的复制方式.这种方式非常灵活,可用于备份.故障恢复.读扩展等. 最基本的设置方式就是建立一个主节点和一个或者多个从节点,每个从节点要知道主节点的地址.运行mon ...

  6. [转载]C#使用Interlocked进行原子操作

    原文链接:王旭博客 » C# 使用Interlocked进行原子操作 什么是原子操作? 原子(atom)本意是"不能被进一步分割的最小粒子",而原子操作(atomic operat ...

  7. 使用eclipse作为python开发工具安装旧版pydev

    在Eclipse中: Help->Install New Software add之后输入的链接地址 https://dl.bintray.com/fabioz/pydev/old/ 如果使用从 ...

  8. PHP

    * PHP语言1.基本内容 * PHP语言 - 类似于javascript语言的 * javascript是客户端(HTML)的脚本语言 * PHP是服务器端的脚本语言 * PHP文件的扩展名为&qu ...

  9. iOS开发-UI 从入门到精通(三)

    iOS开发-UI 从入门到精通(三)是对 iOS开发-UI 从入门到精通(一)知识点的综合练习,搭建一个简单地登陆界面,增强实战经验,为以后做开发打下坚实的基础! ※在这里我们还要强调一下,开发环境和 ...

  10. Java中的常见面试题

    1.sleep()和wait()的区别: 两者都可以控制线性进程,阻塞进程.区别是: -----|sleep():释放CPU,不释放资源(锁).可以通过指定时间来使它自动醒来,时间不到只能调用iter ...