<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>百度搜索</title>
//引入相关插件
<script src="https://cdn.bootcss.com/angular.js/1.3.8/angular.js"></script>
<script src="https://cdn.bootcss.com/angular.js/1.3.8/angular-animate.min.js"></script>
<style type="text/css">
.box{transition: all 0.5s;width: 200px;background: #669900;}
.box.ng-enter{opacity:0;}
.box.ng-enter-stagger{animation-delay: .25s;}
.box.ng-enter-active{opacity:1;}
.box.ng-leave{opacity:1;}
.box.ng-leave-stagger{animation-delay: .25s;}
.box.ng-leave-active{opacity:0;}
</style>
</head>
<body ng-app="pro" ng-controller="demo">
<input type="text" ng-model="Open" ng-change="writ()"/>
<input type="button" value="搜索" />
<ul>
<li ng-class="{box:true}" ng-repeat="data in dataList track by $index" >{{data}}</li>
</ul>
<script type="text/javascript">
var m1 = angular.module("pro",["ngAnimate"])
m1.controller("demo",function($scope,$http){
$scope.writ = function(Open){
$http({
method:"JSONP",
url:"https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su? wd="+$scope.Open+"&cb=JSON_CALLBACK",
}).success(function(data){
$scope.dataList = data.s
console.log($scope.dataList)
})
}
})
</script>
</body>
</html>