Ausblenden des Bereichs in angularJS

Question

Ich habe ein Problem, in dem ich Ergebnisse ausblenden muss, bis der Benutzer mit der Eingabe in die Suchleiste begonnen hat. Ich verwende ein DotNetNuke-Plugin und habe daher dieses Modul nicht selbst erstellt. Die Bereiche, die ich zu verwenden glaube, sind für '.angrid-search', die eine Methode hat, die die Suchbegriffe zurückgibt, die es dann verwenden wird, um zu entscheiden, ob das 'angrid-grid' angezeigt wird. Dies ist der Code, den ich bisher versucht habe, sowie viele verschiedene ähnliche Variationen.

if (angular.element($('.angrid-search')).searchTerms === undefined){ 
    angular.element($('.angrid-grid')).hide(); 
} 

angular.element($('.angrid-search')) kommt zurück mit undefined und gibt die Suchbegriffe einmal etwas eingegeben. Es scheint mir, dass das Problem in der zweiten Zeile ist, in dem ich versuche, das Element zu verstecken.

Ich bin extrem neu zu Angular (das ist so ziemlich mein erstes echtes Problem), so würde die Erklärung in Laien sehr geschätzt werden, besonders da ich genauso wichtig lernen muss, wie ich dieses Problem lösen muss.

Hier ist der grundlegende DOM

<div class="angrid"> 
    <div class="angrid-search"> 
    </div> 
    <div class="angrid-grid-view"> 
     <div class="angrid-grid"> 
     </div> 
    </div> 
</div> 

Es gibt ein paar Sachen dazwischen, aber das sind die relavent Bereiche, und ich wollte nicht das Inspektor-Fenster cpypst. Meine Hauptfrage ist: Soll die Methode in dieser Art von Sitation funktionieren?

Answer 1

Sie könnten etwas wie versuchen.

<div class="angrid"> 
<div class="angrid-search"> 
</div> 
<div class="angrid-grid-view"> 
    <div class="angrid-grid" ng-hide="hidegrid"> 
    </div> 
</div> 

und in js

if (angular.element($('.angrid-search')).searchTerms === undefined){ 
    angular.element($('.angrid-grid')).hidegrid = true; 
} 

Answer 2

Ja. Es sollte funktionieren. Hier ist eine Demo:

angular.module('demo', []) 
 
    .controller('demoCtrl', ['$scope', 
 
    function($scope) { 
 
     $scope.testFn = function() { 
 
     if (angular.element($('.angrid-search')).searchTerms === undefined) { 
 
      angular.element($('.angrid-grid')).hide(); 
 
     } 
 
     }; 
 
    } 
 
    ]);

<script data-require="jquery@1.11.3" data-semver="1.11.3" src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
 
<script data-require="angular.js@1.5.5" data-semver="1.5.5" src="https://code.angularjs.org/1.5.5/angular.js"></script> 
 

 
<div ng-app="demo" ng-controller="demoCtrl"> 
 
    <div class="angrid"> 
 
    <div class="angrid-search"></div> 
 
    <div class="angrid-grid-view"> 
 
     <div class="angrid-grid">Grid!</div> 
 
    </div> 
 
    </div> 
 

 
    <button ng-click="testFn()">the code will work...</button> 
 
</div>

By the way, erwähnen Sie:

angular.element($('.angrid-search')) kommt zurück mit undefined

Ist dies der Fall, dann offensichtlich versteckt Dinge nicht arbeiten. Sie sollten wahrscheinlich eine andere Frage mit genügend Informationen stellen, um dieses Problemszenario von Grund auf zu reproduzieren, sodass wir Ihnen helfen können, ohne auf Raten zu setzen.