Question

我正在尝试根据我在表中给出的属性来过滤表中的某些任务，但搜索栏还会给出具有与输入匹配的其他属性的任务。即，有一个布尔属性，当我在搜索栏中输入“true”时，即使它们在我显示的名称中没有该字符串，任务仍然保留。你知道如何将搜索限制在这些属性中吗？

<input type="text" ng-model="searchFilter">
<table>
    <tr ng-repeat="task in taskList | filter: searchFilter"> 
        <td>{{task.task_desc_1}}</td>                                
        <td>{{task.task_desc_2}}</td>                                
        <td>{{task.task_desc_3}}</td>                                
        <td>{{task.task_bv_ref}}</td>                               
    </tr>      
</table>

Answer 1

您可以创建自己的管道（使用@Pipe注释实现PipeTransform的类）。重载转换（）方法如下：

@Pipe({
name: 'searchTask'
})
export class SearchTaskPipe implements PipeTransform {
transform(tasks: Task[], searchText: string): Task[] {
    if(!tasks){
      return [];
    }
    if(!searchText){
      return tasks;
    }

    searchText=searchText.trim(); 
    searchText=searchText.toLowerCase();

    return tasks.filter(t=>{
      if(t.task_desc_1.toLowerCase().includes(searchText)||
     t.task_desc_2.toLowerCase().includes(searchText)||
    t.task_desc_3.toLowerCase().includes(searchText)||
    t.task_bv_ref.toLowerCase().includes(searchText)||
    ){
        return true;
      }
    }
}
}

将此管道添加到NgModule的声明中。然后在HTML中，您可以按如下方式使用它：

 <tr ng-repeat="task in taskList | searchTask: searchFilter">

过滤搜索对象的特定属性

1 个答案: