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. maven引入的jar带了时间戳

    正常情况下,我们引入的第三方jar一般都是类似spider-1.0.5-SNAPSHOT.jar的名称,但是有些环境下,我们引入的三方jar会带上了时间戳,如下所示: spider-1.0.5-201 ...

  2. ajax分页与组合查询配合使用

    使用纯HTML页与js.ajax.Linq实现分页与组合查询的配合使用 <body> <div id="top"><input type=" ...

  3. 三道Javascript的练习题

    有语句“var x=0;while(____) x+=2;”,要使while循环体执行10次,空白处的循环判定式应写为: A．x<10B. x<=10C.x<20D.x<=20 ...

  4. Win7下共享WiFi热点方法

    管理员权限运行CMD netsh wlan set hostednetwork mode=allow ssid=Wifi名称 key=Wifi密码 netsh wlan start hostednet ...

  5. MyEclipse快捷键大全

    MyEclipse 快捷键1(CTRL)Ctrl+1 快速修复Ctrl+D: 删除当前行Ctrl+Q 定位到最后编辑的地方Ctrl+L 定位在某行Ctrl+O 快速显示 OutLineCtrl+T 快 ...

  6. IOS开发之支付功能概述

    前言:本随笔将对IOS开发的支付功能进行一个概述. 内容大纲: 一.常见的支付方案简介 二.第三方支付SDK 三.苹果官方支付方案 四.Web支付方案 正文: 一.常见的支付方案简介 在微信支付中 微 ...

  7. DIY一个高大上带提醒的计时器，简单实用，你还在等什么

    小编心语:锵锵锵!小编我又来了!昨天发了一篇比较实用的<Python聊天室>,鉴于反响还不错,SO ,小编也想给大家多分享点有用的干货,让大家边学边用.好了,闲话不多说,今天要给各位看官们 ...

  8. Android Fragment生命周期

    Fragment与Activity的生命周期关系: 刚打开Activity:Fragment onAttach > Fragment onCreate > Fragment onCreat ...

  9. .Net缓存管理框架CacheManager

    using System; using CacheManager.Core; namespace ConsoleApplication { class Program { static void Ma ...

  10. SqlServer数据类型

    Character 字符串: 数据类型 描述 存储 char(n) 固定长度的字符串.最多 8,000 个字符. n varchar(n) 可变长度的字符串.最多 8,000 个字符.   varch ...