AngularJS – Ein- und Ausblenden von Elementen ohne Verwendung von JS/Script

Question

Ich habe eine Reihe von Überschriften (<h3>), dass beim Anklicken die entsprechenden Abschnitte ausgeblendet/angezeigt werden.

Dies habe ich durch die Verwendung erreicht ng-show/ng-hide und dann a anrufen $scope Variable isInactive/isActive.

Was ich gerne wissen würde, ist, ob das gleiche Ergebnis erzielt werden kann, ohne dass JS darin verwendet werden muss $scope.isInactive Und $scope.isActive und Logik im HTML-Markup platziert werden?Möglicherweise bei uns ng-class?

HTML:

<div ng-app="">
  <div ng-controller="EventController">
    <div class="tabs">
         <h3 class="" id="tab-{{$index}}-0"><a id="1" data="{{$index}}" ng-click="switch($event)">1 - 5 Years</a></h3>

         <h3 class="inactive" id="tab-{{$index}}-1"><a id="2" data="{{$index}}" ng-click="switch($event)">6 - 10 Years</a></h3>

         <h3 class="inactive" id="tab-{{$index}}-2"><a id="3" data="{{$index}}" ng-click="switch($event)">11 - 15 Years</a></h3>

         <h3 class="inactive" id="tab-{{$index}}-3"><a id="4" data="{{$index}}" ng-click="switch($event)">16 - 20 Years</a></h3>

        <div class="clear" data="{{$index}}" ng-hide="isInactive('#tab-'+{{$index}} + '-0')">1 - 5 Years Text - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris</div>
        <br>
        <div class="clear" ng-show="isActive('#tab-'+{{$index}} + '-1')">6 - 10 Years Text - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris</div>
        <br>
        <div class="clear" ng-show="isActive('#tab-'+{{$index}} + '-2')">11 - 15 Years Text - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris</div>
        <br>
        <div class="clear" ng-show="isActive('#tab-'+{{$index}} + '-3')">16 - 20 Years Text - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris</div>
    </div>
  </div>
</div>

JS:

function EventController($scope) {

$scope.
switch = function (e) {
    var target = e.target || e.srcElement;
    var elem = angular.element(target);
    var parent = elem.parent();
    var allHeadings = parent.parent().find("h3");

    angular.forEach(allHeadings, function (aHeading) {
        var child = angular.element(aHeading);
        child.addClass("inactive");
    });
    parent.removeClass("inactive");
}

$scope.isInactive = function (e) {
    var elem = angular.element(document.querySelector(e));
    if (elem.hasClass("inactive")) {
        return true;
    } else {
        return false;
    }
};

$scope.isActive = function (e) {
    var elem = angular.element(document.querySelector(e));
    if (elem.hasClass("inactive")) {
        return false;
    } else {
        return true;
    }
};

}

Meine jsFiddle: http://jsfiddle.net/oampz/Wr79J/2/

Answer 1

Ja, Sie haben richtig erkannt, dass dies der geeignete Ort für die Verwendung ist ng-class.

Dies ist nur mit HTML und einem minimalistischen Controller möglich: http://jsfiddle.net/Wr79J/4/

JS

function EventController($scope) {
    $scope._activeTab = 1;
}

HTML

<div ng-app="">
    <div ng-controller="EventController">
        <div class="tabs">
             <h3 ng-class="{ 'inactive': _activeTab !== 1, 'active': _activeTab == 1 }">
               <a id="1" ng-click="_activeTab=1">1 - 5 Years</a></h3>

     <!-- .... -->

    <div class="clear" ng-show="_activeTab == 1">
       1 - 5 Years Text - Lorem ipsum ...
    </div>

</div>

Notiz: Ich glaube, du hast es benutzt {{$index}} aus einem Bereich, den dieser Teil der Vorlage geerbt hatte.Das habe ich im Beispiel unangetastet gelassen.

Obwohl dies funktioniert, ist dieser Code nicht sehr wartbar.Möglicherweise möchten Sie stattdessen aussagekräftigere Namen für die Registerkarten verwenden 1, 2, 3, Und 4.

Sie können den Controller mit einem vollständig entfernen ng-init="_activeTabe = 1" auf dem Container-Div, aber es ist nicht die korrekte Verwendung von ng-init.

---

Außerdem gilt es nicht als bewährte Vorgehensweise, das DOM zu manipulieren Trotzdem vom Controller (ich schaue auf die addClass/removeClass im Code).Wenn es nötig ist, dann sollte man es nutzen Richtlinien (z.B. ng-class) für die Manipulation.

Answer 2

Sie können einfach eine Variable festlegen, um die aktive Registerkarte festzulegen.

<div class="tabs">
  <h3 ng-click="range=1">1-5</h3>
  <h3 ng-click="range=2">6-10</h3>
  <div class="clear" ng-show="range==1">1 - 5 Years Text</div>
  <div class="clear" ng-show="range==2">6 - 10 Years Text</div>
</div>

Answer 3

Hier ist ein Beispiel - http://plnkr.co/edit/NTVPbOC5k7HKo88qp6vN?p=preview ohne Javascript-Code für die obige Logik.

  <div>
    <div>
      <div class="tabs">
        <h3 ng-init="active=1" ng-click="active=1" ng-class="{true:'active', false:'inactive'}[active==1]"><a >1 - 5 Years</a></h3>
        <h3 ng-click="active=2" ng-class="{true:'active', false:'inactive'}[active==2]"><a >6 - 10 Years</a></h3>
        <h3 ng-click="active=3" ng-class="{true:'active', false:'inactive'}[active==3]"><a >11 - 15 Years</a></h3>
        <h3 ng-click="active=4" ng-class="{true:'active', false:'inactive'}[active==4]"><a >16 - 20 Years</a></h3>

        <div ng-show="active==1">1 - 5 Years Text - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris</div>
        <br>
        <div ng-show="active==2">6 - 10 Years Text - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris</div>
        <br>
        <div ng-show="active==3">11 - 15 Years Text - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris</div>
        <br>
        <div ng-show="active==4">16 - 20 Years Text - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris</div>
      </div>
    </div>
  </div>