Question

我有这个图标列表：

<LinearLayout
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:orientation="vertical"
          android:background="@drawable/bordertop"
          android:layout_marginTop="0dp"
          android:id="@+id/linearLayout1"
          android:layout_marginBottom="71dp"
          android:layout_gravity="bottom">
        <LinearLayout
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:orientation="horizontal"
          android:weightSum="5">
          <ImageView
              android:src="@drawable/sportscar"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:id="@+id/imageView1"
              android:layout_gravity="fill_horizontal"
              android:layout_weight="0.5" />
          <ImageView
              android:src="@drawable/seatbelt"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:id="@+id/imageView4"
              android:layout_weight="1" />
          <ImageView
              android:src="@drawable/money"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:id="@+id/imageView5"
              android:layout_weight="1"
              android:layout_gravity="fill_horizontal" />
          <ImageView
              android:src="@drawable/customer"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:id="@+id/imageView3"
              android:layout_weight="1" />
          <ImageView
              android:src="@drawable/groupbutton"
              android:layout_width="wrap_content"
              android:layout_height="match_parent"
              android:id="@+id/imageView2"
              android:layout_weight="1.5" />
        </LinearLayout>
        <LinearLayout
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:orientation="horizontal"
  android:weightSum="5">
          <TextView
             android:text="Four"
             android:textAppearance="?android:attr/textAppearanceSmall"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:id="@+id/txtdtl1"
             android:textColor="#13317E"
             android:layout_weight="1.2"
             android:layout_gravity="center_horizontal" />
          <TextView
              android:text="4"
              android:textAppearance="?android:attr/textAppearanceSmall"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:id="@+id/txtdtl2"
              android:textColor="#13317E"
              android:layout_weight="0.5" />
          <TextView
              android:text="PayTm"
              android:textAppearance="?android:attr/textAppearanceSmall"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:id="@+id/txtdtl3"
              android:textColor="#13317E"
              android:layout_weight="1.3" />
          <TextView
              android:text="3.5"
              android:textAppearance="?android:attr/textAppearanceSmall"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:id="@+id/txtdtl4"
              android:textColor="#13317E"
              android:layout_weight="1" />
          <TextView
              android:text="CUG,FB,GP-VP"
              android:textAppearance="?android:attr/textAppearanceSmall"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:id="@+id/txtdtl5"
              android:textColor="#13317E"
              android:drawableTop="@color/BLUE"
              android:layout_weight="1" />
        </LinearLayout>
     </LinearLayout>

我有divs：

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

现在我想要的是当用户点击第一个li来显示第一个div时，如果用户点击第二个li来显示第二个div等等。我需要3个布尔变量或？因为我将在页面上有更多这个<div *ngIf="showHide"> a </div> <div *ngIf="showHide"> b </div> <div *ngIf="showHide"> c </div>并且有更多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>

然后为你的divs：

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

然后为你的divs：

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

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

3 个答案: