<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="https://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
    <style>    </style>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
    <p>磁力搜索</p>
    名字: <input id="textName"  ng-model="name"><button ng-click="search()">搜索</button>
    <p ng-hide="myVar">{{name}}&nbsp的搜索结果如下:</p>
</div><script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
        $scope.myVar = true;
        $scope.name = "肖申克的救赎";
        var userName = document.getElementById('textName');
        if (userName.value != "")
        { $scope.myVar = false;}
                });
</script>
</body>
</html>我就是想实现输入框里内容是空的时候,<p ng-hide="myVar">{{name}}&nbsp的搜索结果如下:</p> 这一段的所有文字都消失。谢谢能帮忙的大神。

解决方案 »

  1.   

    纯手写,自己测试
    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <script src="https://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
        <style>
     
        </style></head>
    <body>
    <div ng-app="myApp" ng-controller="myCtrl">
        <p>磁力搜索</p>
        名字: <input id="textName"  ng-model="name" ng-keyup="keyupEvent()"><button ng-click="search()">搜索</button>
        <p ng-hide="myVar">{{name}}&nbsp的搜索结果如下:</p>
    </div>
     
    <script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function($scope) {
            $scope.myVar = true;
            $scope.name = "肖申克的救赎";
            var userName = document.getElementById('textName');
             
            if ($scope.name != "")
            { $scope.myVar = false;}
            $scope.keyupEvent = function(e){
                if ($scope.name != ""){
    $scope.myVar = false;
                }
    else{
    $scope.myVar = true;
    }
         };
        });
    </script>
     
     
    </body>
    </html>
      

  2.   

    你把ng-hide="myVar"改成ng-hide="!name"就好了
    然后js里那些判断也都不用了
      

  3.   

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <script src="https://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
        <style>
    .reset{list-style-type: none}
        </style>
    </head>
    <body>
    <div ng-app="myApp" ng-controller="myCtrl">
        <p>磁力搜索</p>
        名字: <input id="textName"  ng-model="name"><button ng-click="search()">搜索</button>
        <p ng-hide="!name">{{name}}&nbsp的搜索结果如下:</p>
        <ul class="reset">
            <li ng-repeat="x in datas| filter:name">
                {{x.title + ' ' +x.content }}
            </li>
        </ul>
    </div><script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function($scope) {
            $scope.name = "肖申克的救赎";
            $scope.datas = [
                {title:'肖申克的救赎.avi',content:'点击下载'},
                {title:'肖申克的救赎.mp4',content:'点击下载'},
                {title:'肖申克的救赎.ogg',content:'点击下载'},
                {title:'十月围城.avi',content:'点击下载'},
                {title:'十月围城.mp4',content:'点击下载'},
                {title:'十月围城.ogg',content:'点击下载'}
            ];
            $scope.search=function(){
                
            }
                    });
    </script>
    </body>
    </html>
      

  4.   

    使用ng-hide指令来做就可以了
      

  5.   

    直接把ng-hide="myVar"改成ng-hide="!name"就能实现,刚试了
      

  6.   

    使用ng-hide指令来做就可以了