AngularJS过滤器搜索根本不起作用

Question

我正在前端使用 AngularJS 编写应用程序。我想通过任何单词/字段搜索表格；一个搜索框搜索所有内容。我试图遵循这个 plunker 的工作示例：http://plnkr.co/edit/aIuSDYlFbC4doW6pfsC9?p=preview

这是我在前端的代码：

<div class = "row">
   <label>Search: <input ng-model="query"></label>
</div>

<div class = "row">
  <table ng-repeat="post in posts | orderBy: sort | filter: search">
    <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>
</div>

这是在我的主控制器内部：

'use strict';
 $scope.posts = posts.posts;

 $scope.search = function (row) {
    return (angular.lowercase(row.author).indexOf($scope.query || '') !== -1 ||
    angular.lowercase(row.title).indexOf($scope.query || '') !== -1 ||
    angular.lowercase(row.content).indexOf($scope.query || '') !== -1 ||
    angular.lowercase(row.date).indexOf($scope.query || '') !== -1 ||
 };

我该怎么办？谢谢

Answer 1

<div class = "row">
   <label>Search: <input ng-model="query"></label>
</div>

<div class = "row">
    <table ng-repeat="post in posts | orderBy: sort | filter: query">
        <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>
</div>

Answer 2

试试这个。

HTML：

<label>Search:
  <input ng-model="searchKeyword" ng-model-options="{debounce:1000}">
</label>

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

控制器：

$scope.posts = [{
  title: 'Title one ',
  author: 'Author one ',
  content: 'Content one ',
  date: new Date('10.10.2010')
}, {
  title: 'Title two ',
  author: 'Author two ',
  content: 'Content two ',
  date: new Date('11.11.2011')
}, {
  title: 'Title three ',
  author: 'Author three ',
  content: 'Content three ',
  date: new Date('12.12.2012')
}];

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

var authorMatch, titleMatch, contentMatch, dateMatch;

$scope.search = function(row) {
  authorMatch = row.author.toLowerCase().includes($scope.searchKeyword);
  titleMatch = row.title.toLowerCase().includes($scope.searchKeyword);
  contentMatch = row.content.toLowerCase().includes($scope.searchKeyword);
  dateMatch = row.date.toString().toLowerCase().includes($scope.searchKeyword);

  return authorMatch || titleMatch || contentMatch || dateMatch;
};

去抖动选项在here 中进行了解释。包含函数是 JavaScript 中的新功能，并在 here 进行了解释。

Answer 3

像这样在你的范围内创建一个过滤器变量：

$scope.myFilter = "defaultFilterValue";

将您的过滤器绑定到这样的搜索字段：

    <input type="text" ng-model="myFilter"></input>

像这样将过滤器放在你的 html 中：

  <table ng-repeat="post in posts | orderBy: sort | filter: myFilter">
    <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>

然后……哦等等，就是这样。如果您有任何问题，请告诉我。 Tutorial here 正是您的问题。

---

编辑：此代码已经过测试，因此请按原样使用它并从那里开始。 html:

<div class = "row">
    <label>Search: <input type="text" ng-model="myFilter"></input></label>
</div>

<div class = "row">
    <table ng-repeat="post in posts | orderBy: sort | filter: myFilter">
        <tr>
            <td> {{index.post}} </td> //you had a weird formatting mistake here

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

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

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

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

JS：

$scope.myFilter = "";

$scope.posts = [
        {index: 1, author: "Mark Twain", title: "Tom Sawyer", description: "And den Jim said some racist stuff", date:"02/05/1870"},
        {index: 2, author: "Eirch Remarque", title: "Western Front", description: "Our lost generation, bawww", date: "03/17/1955"}
];

注意：我真的推荐我之前链接的教程。如果您不阅读它，那么至少使用表头。