Angularjs - Nascondere e mostrare l'elemento senza uso di JS / Script
-
21-12-2019 - |
Domanda
Ho un set di titoli (<h3>
) che se cliccò, nascondono / mostrano le loro sezioni corrispondenti.
L'ho raggiunto utilizzando ng-show/ng-hide
e quindi chiamando una variabile $scope
Isinactive / Iactive.
Quello che vorrei sapere, è se lo stesso risultato può essere raggiunto, senza la necessità di utilizzare JS all'interno di $scope.isInactive
e $scope.isActive
e la logica essere inseriti nel markup HTML?Forse con gli Stati Uniti di 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;
}
};
}
.
my jsfiddle: http://jsfiddle.net/oampz/wr79j/2/
Soluzione
Sì, hai identificato correttamente questo il posto APT per l'utilizzo di ng-class
.
È possibile utilizzare solo l'utilizzo di HTML e un controller minimalista: 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>
.
Nota: Penso che stai usando {{$index}}
da un campo di applicazione Questa parte del modello aveva ereditato. L'ho lasciato intatto nell'esempio.
Anche se funziona, questo codice non è molto manutenibile. Si consiglia di utilizzare nomi più descrittivi per le schede anziché 1
, 2
, 3
e 4
.
Puoi liberarti del controller usando completamente un ng-init="_activeTabe = 1"
sul contenitore Div, ma non è l'uso corretto del ng-init
.
.
Inoltre, non è considerato buone pratiche per manipolare il DOM in in qualsiasi modo dal controller (sto guardando il addClass/removeClass
nel codice). Se è necessario, allora uno dovrebbe utilizzare Direttive (ad esempio ng-class
) per la manipolazione.
Altri suggerimenti
È possibile impostare una variabile per impostare la scheda Attiva.
<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>
. Ecco un esempio - http://plnkr.co/edit/ntvpboc5k7hko88qp6vn?p=preview senza codice JavaScript per la logica sopra.
<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>
.