AngularJS divs Umschalten der Sichtbarkeit über die Schaltfläche

Ich habe mehrere Sätze von zwei divs und eine Schaltfläche für jede pro-Seite. Das zwei divs enthält abwechselnd Inhalte, die Taste behandeln soll, die Umschaltung der Sichtbarkeit. Ich kann nicht scheinen zu denken, dass der eine Eckige Lösung, kann erweiterbar sein auf mehrere separate Instanzen in die Seite (mein Geist hält wollen, um es getan in JQuery).

Habe ich einen JSFiddle Beispiel hier.

Sehen Sie zwei divs p_table Klasse mit <span class="trigger">A</span>. Der trigger sollte abwechselnd die beiden p_table innerhalb Ihrer übergeordneten div p_container.

InformationsquelleAutor Alen Giliana | 2014-04-06

  1. 22

    Den Schlüssel für, wie Sie es tun, ist mit ng-Klasse, Sie können es auch tun, mit ng-show/ng-hide. Beide Implementierungen erfordern kein javascript, nur ein controller-Rahmen.

    NG-KLASSE: Wählen Sie eine Klasse auf Basis einer variable, die schaltet auf Auslöser klicken.

    <div class="p_container">
  <p class="p_table" ng-class="{hidden:!show,chaldean:show}">This is actual content</p>
  <p class="p_table" ng-class="{hidden:show,chaldean:!show}">This is transliterated content</p> 
  <span class="trigger" ng-click="show=!show">A</span>
</div>

    NG-SHOW/NG-HIDE: ein-oder ausblenden auf variable. Dies ist die typische Art und Weise, es zu tun.

    <div class="p_container">
  <p class="p_table" ng-show="show">This is actual content</p>
  <p class="p_table" ng-hide="!show">This is transliterated content</p> 
  <span class="trigger" ng-click="show=!show">A</span>
</div>
    Sorry für die Fragen aber begrüßen, wenn Sie hinzufügen können, ein jsfiddle für diese. Grund ist, ich bin nicht in der Lage, um zu sehen, dass es funktioniert möglicherweise aufgrund von Problemen.
    In der Antwort, es ist ein code, bezieht sich auf die "Chaldäer" ich nahm an, es war ein Variablen-Namen, aber ich kann nicht sehen, es in der ursprünglichen Frage. Kann jemand erläutern, was das ist?
    B. Russell sagte, detaillierte code wäre wellcome
    Blick auf die poster der JSFiddle-link. Es ist der name der Klasse, die er verwendet in seinem Beispiel. Also ja, es ist in der ursprünglichen Frage, ob nicht ein wenig verdeckt. 🙂
    Sie haben einen Fehler in Ihrer NG-SHOW/NG-HIDE Beispiel. ng-show="zeigen" bedeutet genau das gleiche wie ng-hide="!Karte" Entweder ng-show="show" - und ng-hide="show" oder die Verwendung von ng-show="!show" in der Stelle von ng-hide.

    InformationsquelleAutor Zack Argyle

  2. 3

    Hier ist, wie ich es gemacht habe, mit ngHide eine kleine toggle-Funktion. Arbeiten demo Hier. Ich hoffe, das hilft

    Meine HTML-Markup

    <div ng-app="myApp" ng-controller="myCtrl">
            <div id="filter-row">
                <span
                    id="toggle-filter"
                    ng-click="toggleFilter()">
                    <i class="glyphicon glyphicon-heart"></i>
                </span>

                <div class="hiddenDiv" ng-hide="toggle">
                    <p>I am the hidden Div!</p>
                </div>
            </div>
</div>

    Meinem AngularJS Controller

    var myApp = angular.module("myApp", []);
myApp.controller ("myCtrl", ['$scope', function($scope){
  $scope.toggle = true;
  $scope.toggleFilter = function() {
       $scope.toggle = $scope.toggle === false ? true : false;
  }
}]);
    Den Rumpf der Funktion kann vereinfacht werden zu $scope.toggle = $scope.toggle === false;
    Fab, arbeitete für mich, danke

    InformationsquelleAutor AllJs

Schreibe einen Kommentar