首页 > 代码库 > ng-show/ng-hide

ng-show/ng-hide

2024-09-09 03:11:23   218人阅读

<!DOCTYPE html>
<html lang="en" ng-app="img">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://www.mamicode.com/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 =http://www.mamicode.com/= $scope.arr[i]){
                        oImg.src = http://www.mamicode.com/$scope.arr[i];
                    }
                }
                return false;
            }
        })
    </script>
</body>
</html>

ng-show/ng-hide


联系
我们