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

Popular posts from this blog

javascript - Using jquery append to add option values into a select element not working -

Android soft keyboard reverts to default keyboard on orientation change -

jquery - javascript onscroll fade same class but with different div -