Angular實(shí)現(xiàn)跨域(搜索框的下拉列表)
angular.js 自帶jsonp，實(shí)現(xiàn)跨域，下面來實(shí)現(xiàn)搜索框的下拉列表，使用百度和360分別嘗試一下
百度：url截取之后紅色部分需替換 ：https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=數(shù)據(jù)&cb=JSON_CALLBACK
360：https://sug.so.#/suggest?callback=JSON_CALLBACK&word=數(shù)據(jù)
注意：需要在服務(wù)器環(huán)境下運(yùn)行
思路：
1 .聲明 angular
2 .控制器函數(shù)中調(diào)用$http服務(wù)，用來讀取web服務(wù)器上的數(shù)據(jù)
3 .綁定數(shù)據(jù)$scope.data=[] 用來存放返回的數(shù)據(jù)
4 .綁定函數(shù)$scope.show=function(){} ,在keyup的時(shí)候執(zhí)行
5 .調(diào)用$http.jsonp(url)
6 .返回結(jié)果賦值給$scope.data ，$scope.data=data.s;
下面代碼
<!doctype html>
<html ng-app="app">
<head>
<meta charset="utf-8">
<style>
</style>
<script src="angular.js"></script>
<script>
var app=angular.module('app',[]); //聲明
app.controller('test',function ($scope,$http){ // $http 是一個(gè)用于讀取web服務(wù)器上數(shù)據(jù)的服務(wù)。
$scope.data=[]; // 綁定數(shù)據(jù)
$scope.show=function (){
// $http.jsonp(url) 是用于讀取服務(wù)器數(shù)據(jù)的函數(shù)。
$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd='+$scope.t1+'&cb=JSON_CALLBACK').success(function (data){
//返回的結(jié)果賦值給$scope.data
$scope.data=data.s;
});
};
});
</script>
</head>
<body ng-controller="test">
<div>
<!-- 輸入內(nèi)容綁定為t1 ，ng-keyup="show()" -->
<input type="text" ng-model="t1" ng-keyup="show()" />
</div>
<ul>
<!-- 數(shù)據(jù)展示 -->
<li ng-repeat="item in data">{{item}}</li>
</ul>
</body>
</html>
以上所述是小編給大家介紹的Angular實(shí)現(xiàn)跨域(搜索框的下拉列表)，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
- Angularjs material 實(shí)現(xiàn)搜索框功能
- Angular實(shí)現(xiàn)搜索框及價(jià)格上下限功能
- Angularjs實(shí)現(xiàn)搜索關(guān)鍵字高亮顯示效果
- 在 Angular 中實(shí)現(xiàn)搜索關(guān)鍵字高亮示例
- angularjs實(shí)現(xiàn)搜索的關(guān)鍵字在正文中高亮出來
- angularjs實(shí)現(xiàn)分頁(yè)和搜索功能
- Angularjs過濾器實(shí)現(xiàn)動(dòng)態(tài)搜索與排序功能示例
- angularJs使用$watch和$filter過濾器制作搜索篩選實(shí)例
- Angular封裝搜索框組件操作示例
相關(guān)文章
本篇文章主要介紹了Angular整合zTree的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-01-01
angular2/ionic2 實(shí)現(xiàn)搜索結(jié)果中的搜索關(guān)鍵字高亮的示例
這篇文章主要介紹了angular2/ionic2 實(shí)現(xiàn)搜索結(jié)果中的搜索關(guān)鍵字高亮的示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了angular簡(jiǎn)介和其特點(diǎn)介紹,本文講解了關(guān)于和jquery的比較、關(guān)于適用場(chǎng)合、關(guān)于UI的結(jié)合、關(guān)于angularjs的特點(diǎn)等內(nèi)容,需要的朋友可以參考下2015-01-01
本篇文章主要介紹了angularJS深拷貝，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-03-03
promise是一種用異步的方式處理值的方法，promise是對(duì)象，代表了一個(gè)函數(shù)最終可能的返回值或者拋出的異常，在與遠(yuǎn)程對(duì)象打交道時(shí)我們可以把他看作是遠(yuǎn)程對(duì)象的一個(gè)代理，通過本文給大家介紹AngularJS中處理多個(gè)promise的方式及什么是promise，需要的朋友參考下2016-02-02
這篇文章主要給大家介紹了Angular2入門教程之模塊和組件的相關(guān)資料，文中介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起看看吧。2017-05-05
上傳文件在很多時(shí)候都能用到，這篇文章主要介紹了AngularJS上傳文件的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-11-11
angular基于ng-alain定義自己的select組件示例
這篇文章主要介紹了angular基于ng-alain定義自己的select組件示例,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-02-02
Angular中ng-options下拉數(shù)據(jù)默認(rèn)值的設(shè)定方法
本篇文章主要介紹了Angular中ng-options下拉數(shù)據(jù)默認(rèn)值的設(shè)定方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
解決angularjs service中依賴注入$scope報(bào)錯(cuò)的問題
今天小編就為大家分享一篇解決angularjs service中依賴注入$scope報(bào)錯(cuò)的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-10-10