ng-show/ng-hide

<!DOCTYPE html>
<html lang="en" ng-app="img">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="angular.js"></script>
<style>
*{
padding: 0;
margin:0;
}
img{
width:600px;
height:50px;
position: absolute;
top:9%;
left:0%;
}
</style>
</head>
<body>
<div ng-controller="show">
<input type="text" id="link" ng-blur="fnShow()">
<img ng-hide="fnShow()"/>
</div>
<script>
//http://img.lelaijuchang.com/001.jpg
var app = angular.module('img',[]);
app.controller('show',function ($scope) {
$scope.arr=[
'http://img.lelaijuchang.com/001.jpg',
'http://img.lelaijuchang.com/002.jpg',
'http://img.lelaijuchang.com/003.jpg',
'http://img.lelaijuchang.com/004.jpg',
'http://img.lelaijuchang.com/005.jpg',
'http://img.lelaijuchang.com/006.jpg'
];
$scope.fnShow = function () {
var oI = document.getElementById('link');
var oImg = document.getElementsByTagName('img')[0];
for(var i=0; i<$scope.arr.length; i++){
if(oI.value == $scope.arr[i]){
oImg.src = $scope.arr[i];
}
}
return false;
}
})
</script>
</body>
</html>
posted @ 2017-03-16 22:56  Edison~~  阅读(125)  评论(0编辑  收藏  举报