DOM-Elemente basierend auf Texteingabe anzeigen und ausblenden

Ich habe eine eckige App, die eine Operation ausführt und Daten in einer Tabelle anzeigt, sobald sich so viele Zeichen in der Eingabetextbox befinden. Ich versuche herauszufinden, wie ich die Tabellen basierend auf der Anzahl der eingegebenen Zeichen im Eingabefeld anzeigen und ausblenden kann.DOM-Elemente basierend auf Texteingabe anzeigen und ausblenden

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

Irgendwelche Vorschläge? Soll ich sogar ng-show benutzen oder gibt es einen besseren Weg, um das zu tun, was ich versuche zu tun?

Quelle

2016-07-01 Michael

'ng-if =" some.model.length> 42 "', usw. – raina77ow

Sie könnten versuchen, die Daten zu erhalten, sobald der Benutzer eine Anzahl von Zeichen eingegeben und dann auf $ scope gesetzt hat und Daten binden die Tabelle, anstatt den Inhalt ein- oder auszublenden, wenn Sie beide Tabellen anzeigen möchten, andernfalls können Sie eine der Anweisungen ng-switch, ng-show/ng-hide oder ng-if verwenden. –

@ raina77ow das hat den Trick gemacht – Michael

Sie könnten $scope.$watch verwenden, um ein Flag zu setzen und Ihre Operation auszuführen. Dann brauchen Sie das Attribut ng-keydown nicht.

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

Quelle

2016-07-01 16:48:02 Shaun

nur mit HTML/auszublenden Tabelle anzuzeigen:

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

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

Quelle

2016-07-01 16:52:37 WorkWe

-Code angebracht ist unten und angenommen, dass minLength ist 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>

Hoffe, es lösen wird dein Problem.

Quelle

2016-07-01 17:02:50

DOM-Elemente basierend auf Texteingabe anzeigen und ausblenden

Antwort

Verwandte Themen