首页 文章

如何通过单击angular2中的/ - 图标来扩展和特定的div？

提问于
浏览 次
0

我希望有图标来扩展和 - 崩溃一个特定的div . 我有一个objrcts数组，所以我将使用* ngFor =“let data of dataArray”进行迭代

我有一个使用手风琴实现这个目的的例子 . 但是当我点击特定div的“ - ”图标时，我想点击并关闭特殊div时打开所有div . 但手风琴一次只开一个

我想要像下面这样的东西

- data[0].name

{{data[0].categoryName}} , {{data[0].groupName}}

- data[1].name

{{data[1].categoryName}} , {{data[1].groupName}}

+ data[2].name
+ data[3].name
- data[4].name

{{data[4].categoryName}} , {{data[4].groupName}}

我想在自上而下打开它，当内容很大时也需要一个滚动条

angular angular2-routing accordion bootstrap-accordion

3 回答

  • 0

    您想要的最基本形式可以通过这种方式创建 .

    您可以随时添加更多css和样式，使其看起来像您想要的那样 .

    TS：

    import {Component} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'

@Component({
  selector: 'my-app',
  template: `
    <div>
      <div class="div" *ngFor="let data of dataArray; let i = index" (click)="iconChange(i)" style="margin-bottom: 20px">
        <div>
          <i class="fa" [ngClass]="{'fa-plus': flagArray[i] == false, 'fa-minus': flagArray[i] == true}" aria-hidden="true" style="float: left"></i>
          {{data.name}}
          </div>
          <div *ngIf="flagArray[i] == true" class="div2">
            {{data.categoryName}} - {{data.groupName}} 
          </div>
        </div>
        <button (click)="showAll()">Expand All</button>
        <button (click)="hideAll()">Collapse All</button>
    </div>
  `,
  stylesUrl:['./style.css']
})
export class App {

  flagArray = [];

  dataArray = [];

  selectedIndex: number;

  constructor() {

    this.selectedIndex = -1;

    this.dataArray = [
    {name: '1', categoryName: 'A1', groupName: 'G1'},
    {name: '2', categoryName: 'A2', groupName: 'g2'},
    {name: '3', categoryName: 'A3', groupName: 'G3'},
    {name: '4', categoryName: 'A4', groupName: 'G4'}
  ]

    for(let  i=0; i<this.dataArray.length; i++){
      this.flagArray.push(false);
    }
  }

  iconChange(i: number){
    this.flagArray[i] = !this.flagArray[i];
  }

  showAll(){
    for(let  i=0; i<this.dataArray.length; i++){
      this.flagArray[i] = true;
    }
  }

  hideAll(){
    for(let  i=0; i<this.dataArray.length; i++){
      this.flagArray[i] = false;
    }
  }
}

    Plunker demo

    回复于
  • 0

    虽然你自己实现这个可能会很有趣，如果你're looking to save on work, there'是一个应用 component library 为此！

    https://github.com/500tech/angular-tree-component
    要么
    https://github.com/valor-software/ng2-tree

    回复于
  • 0
    回复于

相关问题