首页 文章

如何更改崩溃和扩展的图标?

提问于
浏览
0

我的代码在下面,我想在崩溃和扩展完成后上下改变图标 . 但不知怎的,它不起作用 .

<div class="attach-link">

                <a href="javascript:void(0);" *ngIf="fileData.fileDataType.canAttach && !isFinancialEntity" (click)="openFileInput(i)">
                    <i class="fa fa-plus"></i> Add Attachment</a>
                <input type="file" class="hide" id="fileData_{{i}}" ng2FileSelect [uploader]="fileData.uploader" (onFileSelected)="onFileSelected()"
                />
                <a class="attachFileList" href="#attachFileList_{{i}}" data-toggle="collapse">
                    <i class="fa fa-angle-up" ></i>                       

                    Attachments [{{fileData.fileList.length}}] </a>
            </div>

并添加了脚本:

$('a[data-toggle="collapse"]').click(function () {            
        //$(this).find('i').addClass('fa fa-angle-up').removeClass('fa fa-angle-down');
        $(this).find('i .fa fa-angle-up').toggleClass('fa fa-angle-down');
    });

我不知道是什么问题 . 任何帮助将不胜感激 . 非常感谢 .

1 回答

  • 3

    这是以角度向上和向下折叠的示例代码 .

    <div class="attach-link">
          <a href="javascript:void(0);"  (click)="openFileInput(i)">
                  <i class="fa fa-plus"></i> Add Attachment</a>
                <input type="file" class="hide" id="fileData_{{i}}" ng2FileSelect (onFileSelected)="onFileSelected()"
                />
                 <br>                
                <a (click)="collapse=!collapse" class="attachFileList" href="#attachFileList_{{i}}" data-toggle="collapse">
                    <i class="fa" [ngClass]="{'fa-angle-up': collapse, 'fa-angle-down': !collapse}"></i>    
                    Attachments {{fileData.fileList.length}}                 
                </a>
     </div>
    

    控制器

    import { Component } from '@angular/core';
    
    @Component({
      selector: 'my-app',
      templateUrl: './app.component.html',
      styleUrls: [ './app.component.css' ]
    })
    export class AppComponent  {
      name = 'Angular 5';
      collapse:boolean =true;
    }
    

相关问题