Show/hide exact div on click?
Question
I have this list of icons:
<ul>
<li [ngClass]="iconM ? 'active': 'notactive'" title="Kontakti"><span (click)="showHide = !showHide"><i class="fa fa-user"></i><i class="fa fa-angle-down"></i></span> </li>
<li [ngClass]="iconD ? 'active': 'notactive'" title="Adrese"><span (click)="showHide = !showHide"><i class="fa fa-address-card"></i><i class="fa fa-angle-down"></i></span></li>
<li [ngClass]="iconW ? 'active': 'notactive'" title="Primaoci računa"><span (click)="showHide = !showHide"><i class="fa fa-credit-card"></i><i class="fa fa-angle-down"></i></span></li>
</ul>
And i have divs:
<div *ngIf="showHide">
a
</div>
<div *ngIf="showHide">
b
</div>
<div *ngIf="showHide">
c
</div>
Now what i want when user click on first li to show first div, if user click on second li to show second div and so. Do i need 3 boolean variable or ? Because i will have more of this ul li on page and more div to hide/show. If i need for every different boolean variable i will a lot of them. Any suggestion how can i do that?
3 answers
solution1
2 ACCPTED 2017-06-29 06:59:01
Create a showHide object in your component:
const showHide = {};
Then, for your list elements, set the values as follows (removed irrelevant attributes):
<ul>
<li title="Kontakti">
<span (click)="showHide['contacts'] = !showHide['contacts']">...</span>
</li>
<li title="Adrese">
<span (click)="showHide['addresses'] = !showHide['addresses']">...</span>
</li>
<li title="Primaoci računa">
<span (click)="showHide['recipients'] = !showHide['recipients']">...</span>
</li>
</ul>
Then for your divs:
<div *ngIf="showHide['contacts']"></div>
<div *ngIf="showHide['addresses']"></div>
<div *ngIf="showHide['recipients']"></div>
Update
In case you want only one div to be open at a time, you can define show as a string variable. In that case:
const show = null;
Then, for your list elements, set the values as follows (removed irrelevant attributes):
<ul>
<li title="Kontakti">
<span (click)="show = 'contacts'">...</span>
</li>
<li title="Adrese">
<span (click)="show = 'addresses'">...</span>
</li>
<li title="Primaoci računa">
<span (click)="show = 'recipients'">...</span>
</li>
</ul>
Then for your divs:
<div *ngIf="show === 'contacts'"></div>
<div *ngIf="show === 'addresses'"></div>
<div *ngIf="show === 'recipients'"></div>
solution2
0 2017-06-29 06:53:48
Use arrays :
<ul>
<li *ngFor="let item of anyArray; let i = index;" [ngClass]="iconM ? 'active': 'notactive'" title="Kontakti"><span (click)="showHide[i] = !showHide[i]"><i class="fa fa-user"></i><i class="fa fa-angle-down"></i></span> </li>
</ul>
<ng-container *ngFor="let item of anyArray; let i = index;">
<div *ngIf="showHide[i]"></div>
</ng-container>
solution3
0 2017-06-29 07:22:18
I think you are trying on Angular 1.X version. Please mention the output you want in which version. some of them answering on Angular 2. that is not useful for you.
Check the output here Plunkr output for your requirement
`<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
<ul><li ng-repeat="li in li" ng-click="clickmthd($index)">{{li}}</li></ul>
<div ng-repeat="div in div" ng-if="$index == active">Div is {{div}}</div>
</body>
</html>
`
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.li =[1,2,3];
$scope.div =[1,2,3];
$scope.clickmthd = function(index){
$scope.active = index;
}
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.