AngularJS filter search not working at all -
i writing app using angularjs on front end. want search through table word/field; 1 search box everything. tried follow plunker's working example: http://plnkr.co/edit/aiusdylfbc4dow6pfsc9?p=preview
this code on 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 inside 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 do? thank you
make filter variable in scope so:
$scope.myfilter = "defaultfiltervalue";
bind filter search field this:
<input type="text" ng-model="myfilter"></input>
put filter in html 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 have problems. tutorial here on question.
edit: code tested, use , go 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 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 racist stuff", date:"02/05/1870"}, {index: 2, author: "eirch remarque", title: "western front", description: "our lost generation, bawww", date: "03/17/1955"} ];
note: recommend tutorial linked earlier. if don't read it, @ least use table headers.
Comments
Post a Comment