<!DOCTYPE html
>
<
html
lang=
"en"
>
<
head
>
<
meta
charset=
"UTF-8"
>
<
meta
name=
"viewport"
content=
"width=device-width, initial-scale=1.0"
>
<
meta
http-equiv=
"X-UA-Compatible"
content=
"ie=edge"
>
<
title
>Document
</
title
>
<
style
>
* {
margin:
0;
padding:
0;
}
#wei {
width:
500px;
height:
600px;
margin:
0
auto;
border:
0px
solid
gray;
}
#wei input {
width:
476px;
height:
50px;
line-height:
50px;
padding-left:
20px;
font-size:
16px;
}
#wei ul {
height:
auto;
border:
1px
solid
#ccc;
}
#wei ul li {
width:
100%;
height:
30px;
line-height:
30px;
text-indent:
10px;
font-size:
16px;
list-style:
none;
}
#wei ul li a {
text-decoration:
none;
}
#wei ul li:hover {
display:
block;
background:
#ccc;
color:
#fff;
}
.gray {
background:
#ccc;
}
<
/
style
>
<
script
src=
"./angular-1.4.7/angular.min.js"
>
<
/
script
>
<
script
>
var
App =
angular.
module(
'app', []);
App.
controller(
'appController', [
'$scope',
'$http',
function (
$scope,
$http) {
// 用来储存数据
$scope.
str = [];
var
num=
0;
$scope.
num=
num;
// 获取百度数据
$scope.
change =
function (
data,
e) {
$http({
"method"
:
"jsonp",
"url"
:
"https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=" +
$scope.
data +
"&cb=JSON_CALLBACK",
}).
success(
function (
data) {
// 存储获取到数据
$scope.
str =
data.
s;
// 获取键值码
var
keycode=
window.
event?
e.
keyCode:
e.
which;
// 如果键值码等于40
if(
keycode==
40){
// 加一
num++;
// 再判断一下如果num超出范围，回到最大值
if(
num>
$scope.
str.
length-
1){
console.
log(
$scope.
str.
length);
num=
$scope.
str.
length-
1;
}
// 根据index获取value值，model到页面
$scope.
data=
$scope.
str[
num];
console.
log(
$scope.
str[
num]);
false;
// 如果键值码等于38
}
else
if(
keycode==
38){
// 减一
num--;
// 再判断一下如果num超出范围，回到0
if(
num<
0){
num=
0;
};
}
else{
// 否则等于0
num=
0;
}
// 最终的num重新赋值到模型上
$scope.
num=
num;
});
}
}]);
<
/
script
>
</
head
>
<
body
>
<
div
id=
"wei"
ng-app=
"app"
ng-controller=
"appController"
>
<
input
type=
"text"
ng-model=
"data"
ng-keyup=
"change(data,$event)"
>
<
ul
>
<
li
ng-repeat=
"itm in str"
ng-class=
"{gray:$index==num}"
>
<
a
href=
"https://www.baidu.com/s?wd={{itm}}"
>
{{$index}}
{{itm}}
</
a
>
</
li
>
</
ul
>
</
div
>
</
body
>
</
html
>
转载请注明原文地址: https://www.6miu.com/read-17317.html
