ace-component/src/app/dropdownselect-page/dropdownselect-page.component.html

ace-components for ewms

<div id='button' class='page-content'>

  <h3>
    dropdownselect <small style="margin-right:10px">下拉分页 </small><small>ace-dropdownselect</small>
  </h3>
  <p>使用 import AceDropdownselectModule</p>
  <h5 class="text-warning">
    属性
  </h5>
  <table class='table-striped table-bordered table'>
    <tr>
      <th *ngFor='let th of thead'>{{th}}</th>
    </tr>
    <tr *ngFor='let item of tableValue'>
      <td *ngFor='let key of getKeys(item)'>
        <p [innerHTML]="key"></p>
      </td>
    </tr>
  </table>

  <h5 class="text-warning">
    事件
  </h5>
  <table class='table-striped table-bordered table'>
    <tr>
      <th *ngFor='let th of eventHeader'>{{th}}</th>
    </tr>
    <tr *ngFor='let item of eventValue'>
      <td *ngFor='let key of getEventKeys(item)'>
        <p [innerHTML]="key"></p>
      </td>
    </tr>
  </table>

  <div class="block">
    <h5 class="text-warning">
      清除选中
    </h5>
    <p>
      选中的对象[ {{selector1.value?selector1.value.label:""}} ]
    </p>
    <ace-dropdownselect 
    [dataSource]='datasource' 
    pageSize='5'
     #selector1
     ></ace-dropdownselect>
    <div>
        <button class="btn btn-info btn-md"
         ng-reflect-ng-class="btn btn-info btn-md"
          type="button"
          (click)='cleanValue()'
          >清除</button>
    </div>
  </div>
  <div class="block">
    <h5 class="text-warning">
      宽度 width
    </h5>
    <ace-dropdownselect width='300' [dataSource]='datasource'></ace-dropdownselect>
  </div>

  <div class="block">
    <h5 class="text-warning">
      选中默认的值  只需要添加 label:'demo1',<b>selected:true </b>
    </h5>
    <ace-dropdownselect
     [dataSource]='[{label:"demo1",selected:true},{label:"demo2",selected:false}]'
     ></ace-dropdownselect>
  </div>


  <div class="block">
    <h5 class="text-warning">
      多选 multiple
    </h5>
    <ace-dropdownselect [dataSource]='datasource' multiple='true'></ace-dropdownselect>
  </div>

  <div class="block">
    <h5 class="text-warning">
      可视数量 visCount
    </h5>
    <ace-dropdownselect [dataSource]='datasource' visCount='3'></ace-dropdownselect>
  </div>

  <div class="block">
    <h5 class="text-warning">
      每页的总数 pageSize
    </h5>
    <ace-dropdownselect [dataSource]='datasource' pageSize='5'></ace-dropdownselect>
  </div>

  <div class="block">
    <h5 class="text-warning">
      <p>动态改变  在onChanges里面触发的事件，所以好好把握如何触发。</p>
      
      <ace-dropdownselect [dataSource]='newdata' pageSize='5' ></ace-dropdownselect>
    </h5>
    <div>
      <label>输入Option：</label>
      <input type="text" placeholder="请输入添加的option" [(ngModel)]='inputModle'>
      <ace-btn text='添加' type='info' icon='fa fa-plus' size='small' (onClick)='addOption()'></ace-btn>
    </div>

    
  </div>

  <div class="block">
    <h5 class="text-warning">
      支持placeholder
    </h5>
    <ace-dropdownselect [dataSource]='datasource' pageSize='5' [placeholder]='"自定义文字"'></ace-dropdownselect>
  </div>

  <div class="block">
    <h5 class="text-warning">
      禁止翻页 [paging] = 'false'
    </h5>
    <ace-dropdownselect [paging]='false' [dataSource]='datasource' pageSize='5'></ace-dropdownselect>
  </div>

  <div class="block">
    <h5 class="text-warning">
      onChange事件
    </h5>
    <p>
      选中的对象[ {{result}} ]
    </p>
    <ace-dropdownselect [dataSource]='datasource' pageSize='5' (onChange)='countChange($event)' multiple='true'></ace-dropdownselect>

  </div>
</div>