在点击时显示/隐藏确切的div吗？

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：

 <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. 现在我想要的是，当用户单击第二个li显示第二个div时，我要单击第一个li显示第一个div。 Do i need 3 boolean variable or ? 我需要3个布尔变量还是？ Because i will have more of this ul li on page and more div to hide/show. 因为我将在页面上有更多此ul li ，并有更多div隐藏/显示。 If i need for every different boolean variable i will a lot of them. 如果我需要每个不同的布尔变量，我会使用很多。 Any suggestion how can i do that? 任何建议，我该怎么做？

Answer 1

Create a showHide object in your component: 在您的组件中创建一个showHide对象：

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：

<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. 如果一次只打开一个div，则可以将show定义为字符串变量。 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：

<div *ngIf="show === 'contacts'"></div>
<div *ngIf="show === 'addresses'"></div>
<div *ngIf="show === 'recipients'"></div>

Answer 2

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>

Answer 3

I think you are trying on Angular 1.X version. 我认为您正在尝试使用Angular 1.X版本。 Please mention the output you want in which version. 请提及您想要哪个版本的输出。 some of them answering on Angular 2. that is not useful for you. 其中有些人在Angular 2上回答，这对您没有用。

Check the output here Plunkr output for your requirement 在此处检查输出是否符合您的Plunkr输出

`<!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;
   }
});

在点击时显示/隐藏确切的div吗？

问题描述

3 个解决方案

解决方案1
2 已采纳 2017-06-29 06:59:01

解决方案2
0 2017-06-29 06:53:48

解决方案3
0 2017-06-29 07:22:18

在点击时显示/隐藏确切的div吗？

问题描述

3 个解决方案

解决方案1 2 已采纳 2017-06-29 06:59:01

解决方案2 0 2017-06-29 06:53:48

解决方案3 0 2017-06-29 07:22:18

解决方案1
2 已采纳 2017-06-29 06:59:01

解决方案2
0 2017-06-29 06:53:48

解决方案3
0 2017-06-29 07:22:18