AngularJS 过滤器搜索根本不起作用 [英] AngularJS filter search not working at all

问题描述

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

这是我在前端的代码:

<label>搜索:<input ng-model="query"></label>
<div类=行"><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 |日期:"d/M/yyyy"}} </td></tr>

这是在我的主控制器中:

'use strict';$scope.posts = posts.posts;$scope.search = 函数(行){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 ||};

我该怎么办?谢谢

解决方案

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

$scope.myFilter = "defaultFilterValue";

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

像这样把过滤器放在你的 html 中:

 <tr><td>{{index(post)}} </td><td>{{post.title}} </td><td>{{post.author}} </td><td>{{post.content}} </td><td>{{post.date |日期:"d/M/yyyy"}} </td></tr>

然后……哦等等，就是这样.如果您有任何问题，请告诉我.此处的教程正是针对您的问题.

<小时>

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

<label>搜索:<input type="text" ng-model="myFilter"></input></label>
<div类=行"><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 |日期:"d/M/yyyy"}} </td></tr>

JS:

$scope.myFilter = "";$scope.posts = [{index: 1, author: "Mark Twain", title: "Tom Sawyer", description: "and den Jim说过一些种族主义的东西", date:"02/05/1870"},{index: 2, author: "Eirch Remarque", title: "Western Front", description: "Our lost generation, bawww", date: "03/17/1955"}];

注意:我真的推荐我之前链接的教程.如果你不读它，那么至少使用表头.

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

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>

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>

And then...oh wait, that's it. Let me know if you have any problems. Tutorial here on exactly your question.

---

Edit: 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屋！