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. 用Kotlin改写PHP程序是什么样的体验

    学Kotlin其实要看:http://kotlinlang.org/docs/kotlin-docs.pdf 在线版是不完整的!!!少了一些章节,会有点难看懂后面的文档. 我选择了WordPress里 ...

  2. jQuery简单的手风琴菜单

    查看效果:http://keleyi.com/keleyi/phtml/menu/5.htm 本菜单的HTML代码和JS代码都简洁,完整源代码: <!DOCTYPE html PUBLIC &q ...

  3. JavaScript的几种Math函数,random(),ceil(),round(),floor()

    1.Math.random():返回 0 ~ 1 之间的随机数.2.Math.ceil():返回值:返回大于或等于x,并且与之最接近的整数(如果x是正数,则把小数"入":如果x是负 ...

  4. SharePoint 2013 母版页取消和HTML页关联

    前言:在新版本的SharePoint 2013上,有新的功能可以通过HTML导入母版页,然后HTML和Master页面相关联,更改HTML页的时候,Master会自动同步修改,然而,有些时候我们不需要 ...

  5. Android Studio添加aar

    1.把aar复制到项目中的 libs 里面 2.在module 里面的build.gradle 的根目录添加 repositories{ flatDir { dirs 'libs' } } 3.在mo ...

  6. iOS证书和描述文件

    iOS有两种证书和描述文件: 证书类型 使用场景 开发(Development)证书和描述文件 用于开发测试,在HBuilder中打包后可在真机环境通过Safari调试 发布(Distribution ...

  7. Android编码规范03

    一.整个项目的目录规范化sundy老师建议有:系统目录规范.源代码目录规范. 1.系统目录规范: 指项目目录中不仅包括源代码,还需要包括:需求相关文档.设计文档.计划日志文档.测试文档.项目进行中学习 ...

  8. The file “base.app” couldn’t be opened because you don’t have permission to view it.

    Base项目是在Xcode7上创建的,升级Xcode8以后,编译时候提示错误: The file "base.app" couldn't be opened because you ...

  9. Vs2013 html5开发WP8.1 APP之jquery

    仿安卓原生界面,先使用JQM,最新的JQM使用了JQ1.8.5 然后在WP8以上就会遇到动态创建控件的安全性问题 换成JQ2.X即可,但在WP8.1中一定不要删除了 <script src=&q ...

  10. 使用multi-paxos实现日志同步应用

    paxos 说multi-paxos之前先简要说一下paxos paxos是在多个成员之间对某个值(提议)达成一致的一致性协议.这个值可以是任何东西.比如多个成员之间进行选主,那么这个值就是主的身份. ...