【问题标题】:searchKeyword not working in AngularJS filtersearchKeyword 在 AngularJS 过滤器中不起作用
【发布时间】:2015-07-14 05:42:21
【问题描述】:

我正在前端使用 AngularJS 编写应用程序。我想按任何单词/字段搜索表格;一个搜索框搜索所有内容。根据这里的这篇文章:http://hello-angularjs.appspot.com/searchtable 我可以使用 filter: searchKeyword 来做到这一点。

这是我的代码,它没有按预期工作。

<label>Search: <input ng-model="searchKeyword"></label>

<table ng-repeat="post in posts | orderBy: sort | filter: searchKeyword">
    <tr>
       <td> {{index(post)}} </td>

       <td> {{post.title}} </td>

       <td> {{post.author}} </td>

       <td> {{post.content}} </td>

       <td> {{post.date | date: "d/M/yyyy"}} </td>
    </tr>
</table>

我该怎么办?谢谢

【问题讨论】:

标签: angularjs filter angularjs-ng-repeat angular-ngmodel angular-filters


【解决方案1】:

试试这个:

控制器

    $scope.posts = [
      {title:'Title one', author:'Author one', content: 'Content one'},
      {title:'Title two', author:'Author two', content: 'Content two'},
      {title:'Title three', author:'Author three', content: 'Content three'}
    ];

    $scope.searchKeyword = '';
    $scope.sort = 'title';

查看

<label>Search:
  <input ng-model="searchKeyword">
</label>

<table ng-repeat="post in posts | orderBy: sort | filter: searchKeyword">
  <tr>
    <td> {{post.title}} </td>
    <td> {{post.author}} </td>
    <td> {{post.content}} </td>
  </tr>
</table>

【讨论】:

  • 这对我不起作用,当我搜索某些东西时没有任何变化@Sofre Garevski
  • 这个解决方案对我来说不是 100% 有效。我不知道为什么。有时搜索有效,它会按预期提取结果。有时它不会。比如我的post.title是B,搜索就能找到。当它是 A 或 C 或 D 时,它不会找到它们。会不会是 post.date 以某种方式干扰它?顺便说一句,我正在使用 MongoDB 来存储结果
【解决方案2】:

我自己也遇到过类似的问题。

我做了这样的事情

<input class="form-control" type="text" ng-model="searchFilter.itemDesc" 
    placeholder="Search...." />

<tr ng-repeat="item in items | filter: searchFilter">

每个项目都有一个 itemDesc 的属性

这种方法的缺点是它只允许您搜索被重复对象的一个​​属性

如果您希望通过对象的不同属性来搜索它

你可以做类似的事情

Filtering by Multiple Specific Model Properties in AngularJS (in OR relationship)

【讨论】:

  • 我确实按照您提供的示例进行操作,但它对我不起作用。请看看我的新帖子更新@Teliren stackoverflow.com/questions/31394920/…
  • 更新:这种方法适用于单个字段。我真的很好奇为什么会这样。 @Teliren
猜你喜欢
  • 2015-11-16
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多