Question

我有一个角度应用程序，它执行操作并在表格中显示数据，因此输入文本框中有很多字符。我试图弄清楚如何根据输入框内输入的字符数来显示和隐藏表格。

<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或者有更好的方法来做我想做的事情。

Answer 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

Answer 2

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

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

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

Answer 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>

希望它能解决您的问题。

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

3 个答案: