ng-show/ng-hide

Posted Edison~~

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>

以上是关于ng-show/ng-hide的主要内容，如果未能解决你的问题，请参考以下文章