Angular實現(xiàn)跨域(搜索框的下拉列表)
angular.js 自帶jsonp，實現(xiàn)跨域，下面來實現(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ù)
注意：需要在服務器環(huán)境下運行
思路：
1 .聲明 angular
2 .控制器函數(shù)中調(diào)用$http服務，用來讀取web服務器上的數(shù)據(jù)
3 .綁定數(shù)據(jù)$scope.data=[] 用來存放返回的數(shù)據(jù)
4 .綁定函數(shù)$scope.show=function(){} ,在keyup的時候執(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 是一個用于讀取web服務器上數(shù)據(jù)的服務。
$scope.data=[]; // 綁定數(shù)據(jù)
$scope.show=function (){
// $http.jsonp(url) 是用于讀取服務器數(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實現(xiàn)跨域(搜索框的下拉列表)，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
本篇文章主要介紹了Angular整合zTree的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
angular2/ionic2 實現(xiàn)搜索結(jié)果中的搜索關(guān)鍵字高亮的示例
這篇文章主要介紹了angular2/ionic2 實現(xiàn)搜索結(jié)果中的搜索關(guān)鍵字高亮的示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了angular簡介和其特點介紹,本文講解了關(guān)于和jquery的比較、關(guān)于適用場合、關(guān)于UI的結(jié)合、關(guān)于angularjs的特點等內(nèi)容,需要的朋友可以參考下2015-01-01
本篇文章主要介紹了angularJS深拷貝，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-03-03
promise是一種用異步的方式處理值的方法，promise是對象，代表了一個函數(shù)最終可能的返回值或者拋出的異常，在與遠程對象打交道時我們可以把他看作是遠程對象的一個代理，通過本文給大家介紹AngularJS中處理多個promise的方式及什么是promise，需要的朋友參考下2016-02-02
這篇文章主要給大家介紹了Angular2入門教程之模塊和組件的相關(guān)資料，文中介紹的非常詳細，對大家具有一定的參考學習價值，需要的朋友們下面來一起看看吧。2017-05-05
上傳文件在很多時候都能用到，這篇文章主要介紹了AngularJS上傳文件的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
angular基于ng-alain定義自己的select組件示例
這篇文章主要介紹了angular基于ng-alain定義自己的select組件示例,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-02-02
Angular中ng-options下拉數(shù)據(jù)默認值的設定方法
本篇文章主要介紹了Angular中ng-options下拉數(shù)據(jù)默認值的設定方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
解決angularjs service中依賴注入$scope報錯的問題
今天小編就為大家分享一篇解決angularjs service中依賴注入$scope報錯的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-10-10