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. 第三十章 elk（1） - 第一种架构（最简架构）

    软件版本: es:2.4.0 logstash:2.4.0 kibana:4.6.1 一.logstash安装(收集.过滤日志.构建索引) 1.下载:https://www.elastic.co/do ...

  2. ORCALE数据库自动备份(非数据库备份)

    最近项目比较紧:很少写东西了. 这个是我上上个阶段写的一个自动备份的小工具:主要是选择性的备份数据库表结构和表里的数据. 置于工具里面的审计功能下次再介绍吧. 审计数据库结构主要是把表结构的异动都记录 ...

  3. jquery图片播放切换插件

    点击这里查看效果可自定义数字样式和左右点击按钮 这个更好:移入按钮切换版本 更多图片轮播 以下是HTML文件代码: <!DOCTYPE html PUBLIC "-//W3C//DTD ...

  4. 【单页应用之通信机制】view之间应该如何通信

    前言 在单页应用中,view与view之间的通信机制一直是一个重点,因为单页应用的所有操作以及状态管理全部发生在一个页面上 没有很好的组织的话很容易就乱了,就算表面上看起来没有问题,事实上会有各种隐忧 ...

  5. SharePoint 2013 图文开发系列之InfoPath入门

    本文主要介绍SharePoint 2013中,简单发布InfoPath表单,并添加后台代码,示例比较简单,主要描述的是一个创建InfoPath的过程,而非多么深奥的后台代码,希望能够给初学者带来帮助. ...

  6. [转]实现文字跑马灯效果，scrolling text from right to left

    <div> <marquee direction="left" behavior="scroll" scrollamount="10 ...

  7. 好神奇的代码，可以让匿名用户对特定SharePoint 列表拥用添加列表项的权限哦

    如果你不使用代码,很难从界面上去设置列表的匿名用户(如果可以请告诉我,我会自动删除这个博文)拥有列表项的添加权限. 其实这种需求是非常必要的,比如: 1.允许新用户去提交一个注册申请, 2.在召集临时 ...

  8. MyEclipse 2016 CI 4新增BootStrap模板

    Live Preview with CodeLive 目前CodeLive还只有Live Preview这一个功能,在后续的版本中会陆续添加新功能. 新增Bootstrap模板 在模板面板中选择相应的 ...

  9. 总结一下Android中主题(Theme)的正确玩法

    在AndroidManifest.xml文件中有<application android:theme="@style/AppTheme">,其中的@style/AppT ...

  10. Xcode 创建.a和framework静态库(转载)

    库介绍 库从本质上来说是一种可执行代码的二进制格式,可以被载入内存中执行.库分静态库和动态库两种. iOS中的静态库有 .a 和 .framework两种形式:动态库有.dylib 和 .framew ...