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. python基础之异常处理

    Python3 错误和异常 作为Python初学者,在刚学习Python编程时,经常会看到一些报错信息,在前面我们没有提及,这章节我们会专门介绍. Python有两种错误很容易辨认:语法错误和异常. ...

  2. 国内IT软件开发人员现状

             首先在这里讨论的是国内的大陆地区.在今天这个中国IT环境下,开发人员出路何在?一个优秀开发人,应该有致力于编写优雅代码,让别人读得懂,具有可读性,可测试性的代码,不仅仅是可以运行的代 ...

  3. SQL切换真假状态标识字段

    需求:用一条SQL(SQL SERVER)语句,实现反向更改状态标识字段(类型为bit)的值.即是从true变false,或从false到true. 方案: 一.判断原来这个字段值,然后UPDATE为 ...

  4. Jquery使用小技巧

    1. 禁止右键使用 view plaincopy to clipboardprint? 1.       $(document).ready(function(){ 2.           $(do ...

  5. SVG简介

    最近遇到SVG这个名词,于是查阅资料,做个笔记. 前言 图片的数字化.将图片存储为数据有两种方案. 位图.也被称为光栅图.即是以自然的光学的眼光将图片看成在平面上密集排布的点的集合.每个点发出的光有独 ...

  6. Dev TreeList 总结

    1.表格的要求:如果要求有父子节点关系,则必须有ID和ParentID字段,并且父节点ParentID字段必须指向ID字段. 2.Access表格在穿入DATATABLE的时候,要想表现出父子节点关系 ...

  7. 春节快乐！推荐一个关于 SharePoint 和 BI 的视频，笑死我了

    在春节即将来临的日子里,我偶然看到了这个相见恨晚的视频:Attractive Business Intelligence 我几乎是从头笑到尾看完的,太有趣儿了!特别适合放假.过节的时候看.本来今天下午 ...

  8. 【代码笔记】iOS-圆角矩形

    代码: - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view. se ...

  9. 敏捷遇上UML—软创基地马年大会（广州站 2014-4-19）

        我们将在广州为您奉献高端知识大餐,当敏捷遇上UML,会发生怎样的化学作用呢?首席专家张老师将会为您分享需求分析及软件设计方面的最佳实践,帮助您掌握敏捷.UML及两者相结合的实战技巧. 时间:2 ...

  10. vim中tab转为空格

    :set ts=4:set expandtab:%retab!