AngularJS过滤搜索不工作 [英] AngularJS filter search not working at all

问题描述

我写使用的前端AngularJS的应用程序。我想通过任何文字/字段的表进行搜索;一切一个搜索框。我试图按照这个plunker的工作示例： http://plnkr.co/edit/aIuSDYlFbC4doW6pfsC9 p = preVIEW

I am writing an app using AngularJS on the front end. I want to search through a table by any word/field; one search box for everything. I tried to follow this plunker's working example: http://plnkr.co/edit/aIuSDYlFbC4doW6pfsC9?p=preview

这是在前端我的code：

This is my code on the front end:

<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>

这是我的主控制器内：

And this is inside my main controller:

'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 ||
 };

我应该怎么办？谢谢

What should I do? Thank you

推荐答案

请过滤器变量的范围，像这样：

Make a filter variable in your scope like so:

$scope.myFilter = "defaultFilterValue";

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

Bind your filter to a search field like this:

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

将过滤器在HTML像这样：

Put the filter in your html like so:

  <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>

然后...哦，等等，就是这样。让我知道，如果你有任何问题。 教程这里上究竟你的问题。

编辑：这code测试，所以用它完全一样的，并从那里走。
HTML：

This code is TESTED, so use it exactly as is and go from there. 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"}
];

请注意：我真的建议我在前面挂教程。如果你不读它，那么至少使用表头。

Note: I REALLY recommend the tutorial I linked earlier. If you don't read it, then at least use table headers.

这篇关于AngularJS过滤搜索不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！