Sollte man zwischen ng-hide und ng-show wechseln oder nur einen mit anderen Werten verwenden?

-3

Meine Frage bezieht sich auf Best Practice/bevorzugte Lesbarkeit in Angular 1.X mit ng-show und ng-hide.Sollte man zwischen ng-hide und ng-show wechseln oder nur einen mit anderen Werten verwenden?

Wird bei Verwendung von ng-hide und ng-show empfohlen, bei eins zu bleiben und den Wert, den ich evaluiere, zu alternieren oder sollte ich zwischen den beiden wechseln, um den Wert im Ausdruck gleich zu halten?

Siehe die folgenden Beispiele. Wird einer dem anderen vorgezogen und wenn ja, warum?

Angenommen, es gibt nur zwei Zustände, sportSelected kann Hockey oder Football sein, das ist es, also gibt es zwei Zustände.

Mit nur ng-Show und Schalt den Wert

<div class="col-xs-4" ng-show="vm.sportSelected=='hockey'"> 
     NJ Devils 
    </div> 
    <div class="col-xs-4" ng-show="vm.sportSelected=='football'"> 
     NY Jets 
    </div> 
    <div class="col-xs-4" ng-show="vm.sportSelected=='football'"> 
     NY Giants 
    </div>

Abwechselnd ng-Show und ng-hide den Wert zu halten, die gleiche

<div class="col-xs-4" ng-show="vm.isHockeySelected"> 
     NJ Devils 
    </div> 
    <div class="col-xs-4" ng-hide="vm.isHockeySelected"> 
     NY Jets 
    </div> 
    <div class="col-xs-4" ng-hide="vm.isHockeySelected"> 
     NY Giants 
    </div>

Die Spitze mehr scheint klar zu mir, aber es könnte nur wegen schlechter Methode und Variablennamen sein. Ich schaue durch die eckige Dokumentation und ich kann nicht scheinen, was das bevorzugte Ergebnis ist. Wird einer dem anderen vorgezogen?

Edit: Markiert diese geschlossen werden, wurde mir klar, das ist ziemlich Meinung wie Registerkarten vs Räume basiert, obwohl ich denke, eine Lösung Vorteile gegenüber den anderen

Quelle

2016-08-02 Frank Visaggio

Sie tun nicht das Gleiche. Der erste wird nichts anzeigen, wenn BasketBall ausgewählt ist, was Sie wahrscheinlich wollen. Der zweite zeigt NY Jets und NY Giants, wenn BasketBall ausgewählt ist, was wahrscheinlich nicht das ist, was Sie wollen. Auch wenn Sie nur Hockey und Fußball haben, wählen Sie die semantisch korrekte Option: Sie möchten wahrscheinlich, dass NY Jets erscheinen, wenn Fußball gewählt wird, nicht, wenn Hockey nicht ist. –

Es gibt nur zwei Optionen oder Zustände, die ich hätte angeben sollen. Auch das könnte ein unangenehmes Beispiel sein, da es eine Metapher für etwas anderes ist, an dem ich gerade arbeite und die genauen Details nicht teilen kann. –

Das ändert nichts an meinem Standpunkt. Wenn Sie eine dritte Option einführen, möchten Sie, dass Ihr Code weiterhin wie erwartet funktioniert. Und nur die erste Option wird das tun, denn die Regel besagt, dass "NY Jets" nur angezeigt werden soll, wenn "Football" ausgewählt ist. Die Regel ist nicht "NY Jets" sollte angezeigt werden, wenn Hockey nicht ausgewählt ist. –

ng-hide und ng-show funktionieren beide auf unterschiedliche Weise. Sie sind im Wesentlichen CSS-Klassen, die das angegebene div verbergen oder anzeigen, je nachdem, wie der Wert ausgewertet wird.

<!-- when $scope.myValue is truthy (element is visible) --> 
<div ng-show="myValue"></div>

wenn myValue true ergibt dann würde die div

<!-- when $scope.myValue is falsy (element is hidden) --> 
<div ng-show="myValue" class="ng-hide"></div>

jedoch im zweiten Beispiel zu sehen sein, die div versteckt sein würde als die Klasse des von ng-hide gesetzt.

auch können Sie ng-show oder ng-hide überprüfen ausgeführt werden, wenn der Wert falsch ergibt, etwa so: <div ng-show="!myValue"></div>

Aufgrund der Natur des digest Zyklus in Angular, werden diese Kontrollen liefen auf Seite Last werden. Wenn Sie nicht möchten, dass das div auf der Seite angezeigt wird, empfiehlt es sich, ng-if anstelle von ng-show oder zu verwenden, da es nicht auf der Seite geladen wird, anstatt es einfach zu verbergen.

Im folgenden Ausschnitt sehen Sie ein Beispiel, das sowohl für ng-hide als auch für ng-show funktioniert, wobei der Wert der ng-model Wertantwort der Eingabe-Checkbox 'checked' verwendet wird. Das gibt eine boolean Antwort.

Wenn angeklickt wird, wird der Wert für 'überprüft' zu true ausgewertet. Wenn es nicht geklickt wird, wird der Wert false ausgewertet. Wenn das ng-Modell zu false ausgewertet wird, wird das ng-hide div angezeigt, wenn das ng-Modell zu true ausgewertet wird, wird das ng-show div angezeigt.

Literatur hier: Angular ng-show documentation

@import url(../../components/bootstrap-3.1.1/css/bootstrap.css); 
 
.animate-show { 
 
    line-height: 20px; 
 
    opacity: 1; 
 
    padding: 10px; 
 
    border: 1px solid black; 
 
    background: white; 
 
} 
 

 
.animate-show.ng-hide-add, .animate-show.ng-hide-remove { 
 
    transition: all linear 0.5s; 
 
} 
 

 
.animate-show.ng-hide { 
 
    line-height: 0; 
 
    opacity: 0; 
 
    padding: 0 10px; 
 
} 
 

 
.check-element { 
 
    padding: 10px; 
 
    border: 1px solid black; 
 
    background: white; 
 
}

<!doctype html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Example - example-ng-show-production</title> 
 

 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script> 
 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.js"></script> 
 
    
 

 
    
 
</head> 
 
<body ng-app="ngAnimate"> 
 
    Click me: <input type="checkbox" ng-model="checked" aria-label="Toggle ngHide"><br/> 
 
<div> 
 
    Show: 
 
    <div class="check-element animate-show" ng-show="checked"> 
 
    <span class="glyphicon glyphicon-thumbs-up"></span> I show up when your checkbox is checked. 
 
    </div> 
 
</div> 
 
<div> 
 
    Hide: 
 
    <div class="check-element animate-show" ng-hide="checked"> 
 
    <span class="glyphicon glyphicon-thumbs-down"></span> I hide when your checkbox is checked. 
 
    </div> 
 
</div> 
 
</body> 
 
</html> 
 

 
<!-- 
 
Copyright 2016 Google Inc. All Rights Reserved. 
 
Use of this source code is governed by an MIT-style license that 
 
can be found in the LICENSE file at http://angular.io/license 
 
-->

Quelle

2016-08-03 02:03:43 amyloula

genial post immer noch durchlesen –

-1

hat Unabhängig davon, ob Sie verwenden ng-hide oder ng-show sollte basierend darauf, wie die Seite standardmäßig angezeigt werden soll. Wenn Sie die Sichtbarkeit eines Elements steuern, das standardmäßig ausgeblendet wird und erst angezeigt wird, nachdem der Benutzer eine Aktion abgeschlossen hat (z. B. die Auswahl einer Sportart), möchten Sie ng-show verwenden. Wenn das Element standardmäßig angezeigt werden soll und nur nach einer Benutzeraktion ausgeblendet werden soll (z. B. ein Div, das "Sport auswählen" anzeigt, das verschwindet, sobald eine Sportart ausgewählt wurde), möchten Sie ng-hide verwenden.

Mit den Anweisungen wird dieser Weg mehr zur Lesbarkeit beitragen, als sich Gedanken darüber zu machen, wie die boolesche Bedingung selbst spezifiziert ist. Es hat auch einen wichtigen praktischen Vorteil. Wenn Sie ng-hide für etwas verwenden, das standardmäßig ausgeblendet werden soll, kann das Element bei jedem Laden der Seite flackern, da in frühen $ digest-Zyklen, bevor Ihr Bereich vollständig ausgewertet werden kann, das Ergebnis dieser Bedingung falsch ist , wodurch das Element kurz erscheint, bevor es verschwindet.

Sie haben die richtige Idee im oberen Beispiel (sieht aus wie Sie ein Syntaxproblem mit den Anführungszeichen haben).

Quelle

2016-08-03 01:43:36 wrshawn

Sollte man zwischen ng-hide und ng-show wechseln oder nur einen mit anderen Werten verwenden?

Antwort

Verwandte Themen