在點擊時顯示/隱藏確切的div嗎？

Question

我有以下圖標列表：

 <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>

我有div：

 <div *ngIf="showHide">
  a
 </div>
 <div *ngIf="showHide">
   b
  </div>
 <div *ngIf="showHide">
   c
  </div>

現在我想要的是，當用戶單擊第二個li顯示第二個div時，我要單擊第一個li顯示第一個div。 我需要3個布爾變量還是？ 因為我將在頁面上有更多此ul li ，並有更多div隱藏/顯示。 如果我需要每個不同的布爾變量，我會使用很多。 任何建議，我該怎么做？

Answer 1

在您的組件中創建一個showHide對象：

const showHide = {};

然后，對於列表元素，按如下所示設置值（刪除了不相關的屬性）：

<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>

然后為您的div：

<div *ngIf="showHide['contacts']"></div>
<div *ngIf="showHide['addresses']"></div>
<div *ngIf="showHide['recipients']"></div>

更新

如果一次只打開一個div，則可以將show定義為字符串變量。 在這種情況下：

const show = null;

然后，對於列表元素，按如下所示設置值（刪除了不相關的屬性）：

<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>

然后為您的div：

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

Answer 2

使用數組：

<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

我認為您正在嘗試使用Angular 1.X版本。 請提及您想要哪個版本的輸出。 其中有些人在Angular 2上回答，這對您沒有用。

在此處檢查輸出是否符合您的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