2

我有一个带有搜索功能的下拉菜单和一个带有项目（和复选框）的列表，我想让搜索项更新该列表中的项目。

例子：

我有 5 个项目： - project1 - 马铃薯 - listItem1 - listItem2 - 不管

这个想法是，当您没有输入任何内容时，您会看到所有 5 个项目，如果您输入“p”，您只会看到 project1 和土豆。到目前为止，这是我的代码：

<div id="dropdown-menu">
    <button id="show-users" (click)="showMenu = !showMenu">Project toevoegen</button> 
    <div id="drp-project-select">
        <div class="scroller" [hidden]="!showMenu">
            <div id="search-wrapper">
                <i class="fa fa-search"></i>
                <input [(ngModel)]="searchTerm" type="text" placeholder="Zoek op naam..." >
            </div>   
            <ul>
                <li *ngFor="#project of projectdata.LoginResponse?.ProjectVM, #i = index">
                    <label class="checkbox-label" >
                        <input type="checkbox" class="dropdown-checkbox" [(ngModel)]="project.isChecked" >
                        <span>{{project.Project}}</span>
                    </label>
                </li>
            </ul>
        </div>
    </div>
</div>
4

2 回答 2

1

使用过滤管。有关完整示例，请参见https://plnkr.co/edit/4Il8QMlh9UYQ4hyrnU3W?p=preview

<input [(ngModel)]="searchTerm" type="text" placeholder="Zoek op naam..." #search>
...
<li *ngFor="#project of projectdata.LoginResponse?.ProjectVM | filter:'Project':search.value, #i = index">

仅支持按一列过滤，但不应该很难扩展。如果没有更改以防止它返回相同的结果

异常：表达式在检查后发生了变化。

import {Pipe, PipeTransform} from 'angular2/core'

@Pipe({name: 'filter'})
export class FilterPipe implements PipeTransform {
  previousResult:any[];

  transform(value:any[], args:string[]) : any {
    if(!value || !args || args.length < 2 || !args[0] || !args[1]) {
      return value;
    }
    console.log('value: ' + value);
    console.log('args: ' + args);

    var result = value.filter((val) => {
      console.log('item: ' + val[args[0]])
      var contains = val[args[0]].indexOf(args[1]) > -1;
      console.log('found: ' + contains);
      return contains;
    });

    console.log(result);
    if(this.previousResult && this.previousResult.length == result.length) {
      for(var i = 0; i < result.length; i++) {
        if(this.previousResult[i] != result[i]) {
          console.log(i);
          this.previousResult = result;
          return this.previousResult;
        }
      }
    }
    this.previousResult = result;
    return this.previousResult;
  }
}
于 2016-02-23T08:35:41.477 回答
1

您可以利用表单控件来做到这一点：

constructor() {
  this.ctrl = new Control();

  // Some data for testing  
  this.showMenu = true;
  this.projectdata = {
    LoginResponse: {
      ProjectVM: [{
        isChecked: true,
        Project: 'test'
      }]
    }
  };

  this.initialData = this.projectdata.LoginResponse.ProjectVM
  this.filteredData = this.initialData.slice(0, 5);

  this.ctrl.valueChanges.subscribe(
    (val) => {
      if (!val) {
        this.filteredData = this.initialData.slice(0, 5);
      }
      this.filteredData = this.initialData.filter((project) => {
        return new RegExp('^'+val).test(project.Project);
      });
    });
  }

不要忘记在您的输入中引用控件：

<input [ngFormControl]="ctrl" type="text" placeholder="Zoek op naam..." >

请参阅此 plunkr：https ://plnkr.co/edit/ocgXxAvcPPtvW5SXEDQ9?p=preview 。

于 2016-02-23T08:41:36.320 回答