下拉框

gaobaoming

2018-11-13 d0b60ac215618dd57941467f80085de29db4da39

下拉框

 src/pages/access/components/dropdownlist/dropdownlist.html

New file
@@ -0,0 +1,34 @@
<ion-grid>
    <ion-row>
        <ion-col col-12 (click)="contentShow()">
            <input readonly>123
            <i class="fa fa-area-chart"></i>
        </ion-col>
    </ion-row>
</ion-grid>
<ion-list *ngIf = "exhibition">
    <ion-row class="modal" col-12>
        <ion-row class="mol_content" col-9 style="overflow:scroll;padding-bottom: 94px;">
            <ion-searchbar (input)="getItems($event)" style="max-height:50px;"></ion-searchbar>
            <ion-col col-12 class="mol_data">
                <ul style="margin:0;padding: 0; padding-bottom: 144px;">
                    <li>
                        <ion-item>
                            <ion-label>全选</ion-label>
                            <ion-checkbox [checked]="fullSelection" [(ngModel)]="assdsd" (click)="checkedAll()"></ion-checkbox>
                        </ion-item>
                    </li>
                    <li *ngFor="let mdata of medata">
                        <ion-item>
                            <ion-label>{{mdata.value}}</ion-label>
                            <ion-checkbox [checked]="selectAll" id = "{{mdata.code}}" (click)="selectOne($event)" ></ion-checkbox>
                        </ion-item>
                    </li>
                </ul>
            </ion-col>
            <ion-col col-12 class="mol_foot" (click)="confirm()">
                确定
            </ion-col>
        </ion-row>
    </ion-row>
</ion-list>

 src/pages/access/components/dropdownlist/dropdownlist.scss

New file
@@ -0,0 +1,52 @@
.modal{
    width: 100%;
    height: 100%;
    position: fixed;
    right: 0;
    top: 44px;
    background: rgba(0, 0, 0, 0.186);
    z-index: 999;
    // text-align: right;
}
.mol_content{
    background: white;
    margin: 0;
    position: absolute;
    right: 0;
    top: 0;
    padding: 0;
    height: 100%;
}
.mol_foot{
    position: fixed;
    bottom: 50px;
    width: 100%;
    height: 50px;
    background: rgb(11, 87, 252);
    text-align: center;
    line-height: 50px;
    font-size: 16px;
    padding-right: 100px;
    color: white;
}
.mol_data{
    position: absolute;
    top: 50px;
}
.checkbox-ios .checkbox-icon{
    width: 14px;
    height: 14px;
}
ion-label{
    font-size: 16px;
}
.checkbox-ios .checkbox-checked .checkbox-inner{
    left: 4.5px;
    top: 1.6px;
}
.searchbar-ios{
    background: none;
}
.searchbar-ios.searchbar-left-aligned .searchbar-input{
    border: 1px solid rgba(0, 0, 0, 0.2);
}

 src/pages/access/components/dropdownlist/dropdownlist.ts

New file
@@ -0,0 +1,142 @@
import { Component, Input } from '@angular/core';
import { HttpClient } from 'kl/core';

/**
 * Generated class for the InputComponent component.
+ +*
 * See https://angular.io/docs/ts/latest/api/core/index/ComponentMetadata-class.html
 * for more info on Angular Components.
 */
@Component({
  selector: 'test-dropdownlist',
  templateUrl: 'dropdownlist.html'
})
export class DropdownlistComponent {

  @Input()
  id = '';
  @Input()
  data = {
    id: '0',
    name: 'err',
    type: 1,
    max: '',
    minx: ''
  };
  public exhibition: boolean = false;
  public selectAll: boolean = false;
  public fullSelection:boolean = false;
  public selectDatas = [];
  public searchValue = "";
  public assdsd;
  public search = [];
  public medata = [
    { "name": "key", "code": "C0001", "value": "孙悟空" },
    { "name": "ke2", "code": "C0002", "value": "唐僧" },
    { "name": "ke3", "code": "C0003", "value": "沙和尚" },
    { "name": "ke4", "code": "C0004", "value": "猪八戒" },
    { "name": "key", "code": "C0005", "value": "孙悟空" },
    { "name": "ke2", "code": "C0006", "value": "唐僧" },
    { "name": "ke3", "code": "C0007", "value": "沙和尚" },
    { "name": "ke4", "code": "C0008", "value": "猪八戒" },
    { "name": "key", "code": "C0009", "value": "孙悟空" },
    { "name": "ke2", "code": "C00010", "value": "唐僧" },
    { "name": "ke3", "code": "C00011", "value": "沙和尚" },
    { "name": "ke4", "code": "C00012", "value": "猪八戒" },
    { "name": "ke2", "code": "C00013", "value": "唐僧" },
    { "name": "ke3", "code": "C00014", "value": "沙和尚" },
    { "name": "ke4", "code": "C00015", "value": "猪八戒" },
    { "name": "ke2", "code": "C00016", "value": "唐僧" },
    { "name": "ke3", "code": "C00017", "value": "沙和尚" },
    { "name": "ke4", "code": "C00018", "value": "猪八戒" },
    { "name": "ke2", "code": "C00019", "value": "唐僧" },
    { "name": "ke3", "code": "C00020", "value": "沙和尚" },
    { "name": "ke4", "code": "C00021", "value": "猪八戒" },
    { "name": "ke2", "code": "C00022", "value": "唐僧" },
    { "name": "ke3", "code": "C00023", "value": "沙和尚" },
    { "name": "ke4", "code": "C00024", "value": "猪八戒" }
  ]
  constructor(private http: HttpClient) { }


  ngOnInit(): void {
    this.search = this.medata.map(i=>i);
    console.log(this.id);
  }
  contentShow() {
    this.exhibition = true;
  }
  checkedAll() {
    if (this.fullSelection) {
      this.selectDatas = [];
      this.fullSelection = false;
      this.selectAll = false;
    } else {
      this.selectDatas = this.medata.map(i=>i);
      // this.selectDatas = this.medata.concat([]);
       this.selectAll = false;
      setTimeout(() => {
        this.selectAll = true;
      }, 0.0000000000000000000000000000000001);
      this.fullSelection = true;
    }
  }
  selectOne(code) {
    let selectData
    let num = 0;
    let dataCode = code.path[2].id
    for (var i = 0; i < this.medata.length; i++) {
      if (this.medata[i].code == dataCode) {
        selectData = this.medata[i];
      }
    }
    for (var i = 0; i < this.selectDatas.length; i++) {
      if (dataCode == this.selectDatas[i].code) {
        num++
      }
    }
    if (num == 0) {
      this.selectDatas.push(selectData);
    } else {
      this.fullSelection = false;
      this.selectDatas = this.removeAaary(this.selectDatas,selectData);
    }
  }
  confirm(){
    console.log(this.selectDatas);
    this.exhibition = false;
  }
  getItems(val){
    console.log(this.assdsd);
    if(val.data){
      this.searchValue+=val.data;
    }else{
      this.searchValue = this.searchValue.substring(0,this.searchValue.length - 1);
    }
    console.log(this.searchValue);
    for(var i=0;i<this.medata.length;i++){
      if(this.medata[i].name.indexOf(this.searchValue)==-1){
        this.removeAaary(this.medata,this.medata[i]);
      }
    }
  }
  removeAaary(_arr, _obj) {
    var length = _arr.length;
    for (var i = 0; i < length; i++) {
      if (_arr[i] == _obj) {
        if (i == 0) {
          _arr.shift();
          return _arr;
        }
        else if (i == length - 1) {
          _arr.pop();
          return _arr;
        }
        else {
          _arr.splice(i, 1);
          return _arr;
        }
      }
    }
  }
}