根据文本输入显示和隐藏 DOM 元素答案

【问题标题】：Show and Hide DOM elements based off of text input根据文本输入显示和隐藏 DOM 元素
【发布时间】：2016-11-04 03:39:04
【问题描述】：

我有一个 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>

有什么建议吗？我应该使用 ng-show 还是有更好的方法来做我想做的事情。

【问题讨论】：

ng-if="some.model.length > 42"等
您可以在用户输入一定数量的字符后尝试获取数据，然后将其设置在 $scope 和数据绑定到表格中，而不是显示或隐藏内容，如果您想同时显示两者表格，否则您可以使用任何 ng-switch、ng-show/ng-hide 或 ng-if 指令。
@raina77ow 成功了

标签： javascript jquery html css angularjs

【解决方案1】：

您可以使用$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;
    }
});

Plunker Demo

【讨论】：

【解决方案2】：

仅使用 HTML 来显示/隐藏表格：

<div ng-show="some.model.length >= minlength">
    <div id="table 1 >
        <!--content -->
    </div>

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

【讨论】：

【解决方案3】：

代码附在下面，假设 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>

希望它能解决您的问题。

【讨论】：