Javascript 显示和隐藏基于文本输入的DOM元素_Javascript_Jquery_Html_Css_Angularjs

Javascript 显示和隐藏基于文本输入的DOM元素

javascript jquery html css angularjs

Javascript 显示和隐藏基于文本输入的DOM元素,javascript,jquery,html,css,angularjs,Javascript,Jquery,Html,Css,Angularjs,我有一个angular应用程序，当输入文本框中有这么多字符时，它会执行操作并在表格中显示数据。我试图找出如何根据输入框中键入的字符数显示和隐藏表格 <head> <script> angular.module('minLength', []) .controller("SomeController ", ['$scope ', function($scope) { $scope.minlength = 3;

我有一个angular应用程序，当输入文本框中有这么多字符时，它会执行操作并在表格中显示数据。我试图找出如何根据输入框中键入的字符数显示和隐藏表格

<head>
<script>
      angular.module('minLength', [])
         .controller("SomeController ", ['$scope ', function($scope) {
            $scope.minlength = 3; 
         }];
    </script>
</head>
<div ng-controller="SomeController">
    <input type="text" id="foo" name="input" ngMinLength="minlength" ng-keydown="some.operation()" ng-model="some.model">


    <div id="table 1 >
    <!--content -->

    </div>


    <div id="table 2">
    <!-- content -->
    </div>
</div>


角度.module（'minLength'，[]）
.controller（“SomeController”、[“$scope”、函数（$scope）{
$scope.minlength=3；
}];
您可以使用$scope.$watch
设置标志并运行操作。这样就不需要ng keydown
属性
// In HTML
<div ng-show="dataAvailable">
    <div id="table1">
    </div>
    <div id="table2">
    </div>
</div>

// In controller
$scope.$watch("some.model", function(newVal) {
    if (newVal.length >= 3) {
        $scope.dataAvailable = true;
        // some.operation
    } else {
        $scope.dataAvailable = false;
    }
});

//在HTML中
//内部控制器
$scope.$watch（“some.model”，函数（newVal）{
如果（newVal.length>=3）{
$scope.dataAvailable=true；
//手术
}否则{
$scope.dataAvailable=false；
}
});

仅使用HTML显示/隐藏表格：
<div ng-show="some.model.length >= minlength">
    <div id="table 1 >
        <!--content -->
    </div>

    <div id="table 2">
        <!-- content -->
    </div>
</div>


代码附在下面，假设minLength为4
<!DOCTYPE html>
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js"></script>
<script>
      angular.module('minLength', [])
         .controller("SomeController", ['$scope', function($scope) {
            var minlength = 4; 
            $scope.some = {model: null,
               operation: function() {
                $scope.showTable1 = this.model && this.model.length > minlength;
                                $scope.showTable2 = $scope.showTable1;
            }};


         }]);
    </script>
<body ng-app="minLength">

<div ng-controller="SomeController">
    <input type="text" id="foo" name="input" ng-change="some.operation()" ng-model="some.model">


    <div id="someTable" ng-if="showTable1">
    <!--content -->
     <table>
      <tr>
        <td>ssasas</td>
        <td> AAAAAAAAAAAAAAA</td>
      </tr>
    </table>

    </div>
<hr>

    <div id="table 2" ng-if="showTable2">
    <!-- content -->
<table>
      <tr>
        <td>VVVVVVVV</td>
        <td>AAAAAAAAAA</td>
      </tr>
    </table>
    </div>
</div>

</body>
</html>


角度.module（'minLength'，[]）
.controller（“SomeController”、[“$scope”、函数（$scope）{
var minlength=4；
$scope.some={model:null，
操作：函数（）{
$scope.showTable1=this.model&&this.model.length>minlength；
$scope.showTable2=$scope.showTable1；
}};
}]);
ssasas
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

VVVVV
AAAAAAAAAA

希望它能解决您的问题。
ng if=“some.model.length>42”
，等等。用户输入一定数量的字符后，您可以尝试获取数据，然后将其设置为$scope并将其数据绑定到表中，而不是显示或隐藏内容（如果您想同时显示这两个表），否则您可以使用ng switch、ng show/ng hide或ng if指令中的任意一个。@raina77ow这就成功了