问题
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
回答1:
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.
回答2:
<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>
回答3:
Try this one.
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>
Controller:
$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;
};
The debounce option is explained here. Includes function is new in JavaScript and is explained here.
来源:https://stackoverflow.com/questions/31394920/angularjs-filter-search-not-working-at-all