Ng-repeat filter on multiple fields

Question

I have an ng-repeat that iterates over a document where I want to do a " | filter:search", but want the filter to run on specific fields in the document.

I found a couple examples, that just don't work.

(I have an input field with a model=search)...

The way they say you target specific fields is like this:

<div ng-repeat="x in data | filter({first_name:search,last_name:search })">{{x.first_name}} {{x.last_name}}</div>

I remember doing something in the past and I think this is close, but not quite.

Any help?

x in data | filter : {first_name:search,last_name:search } this is the right syntax — Fetrarij
– Fetrarij, Commented Aug 26, 2017 at 2:53

Kunvar Singh · Accepted Answer · 2017-08-26 02:58:40Z

<div ng-repeat="obj in objs | filter:filterFn">{{obj.name}}</div> see this is the function : filterFn $scope.filterFn = function(elm) { if($scope.filterlocation[elm.location]) { return true; } return false; };

user7110739 · Accepted Answer · 2017-08-26 03:58:27Z

// Code goes here (function(){ var myApp = angular.module('myApp',['angular.filter']); myApp.controller('myCtrl', function($scope){ var vm= this; vm.x = 20; vm.tableData = [ { first_name: 'Programmer', last_name: '21', },{ first_name: 'Abc', last_name: 'Xyz' },{ first_name: 'Kunvar', last_name: 'Singh' },{ first_name: 'Cnak', last_name: '2' } ]; }) })();

<!DOCTYPE html> <html ng-app="myApp"> <head> <script data-require="[email protected]" data-semver="1.4.1" src="https://code.angularjs.org/1.4.1/angular.js"></script> <script data-require="[email protected]" data-semver="0.5.2" src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.2/angular-filter.js"></script> <link rel="stylesheet" href="style.css" /> <script src="script.js"></script> </head> <body ng-controller="myCtrl as vm"> <input type="text" placeholder="enter your search text" ng-model="vm.searchText" /> <table> <tr ng-repeat="row in vm.tableData | filterBy: ['first_name','last_name']: vm.searchText"> <td>{{row.first_name}}</td> <td>{{row.last_name}}</td> </tr> </table> <p>This will show filter from <b>two columns</b> only(first_name and last_name) . Not from all. Whatever columns you add into filter array they will be searched. all columns will be used by default if you use <b>filter: vm.searchText</b></p> </body> </html>

Jesus Carrasco · Accepted Answer · 2017-08-26 04:04:30Z

This is an example for a table to search for eachColumn and for all colums in an input all. Heres the example ->pnlkr All can be done in the view. HTML

 <!DOCTYPE html> <html ng-app="plunker"> <head> <meta charset="utf-8" /> <title>AngularJS Plunker</title> <script>document.write('<base href="' + document.location + '" />');</script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css"/> <link rel="stylesheet" href="style.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular-animate.js"></script> <script src="app.js"></script> </head> <body ng-controller="MainCtrl as rchCtrl"> <div> <label>Search</label> <input ng-model="searchAll"> <hr> <table class="table table-striped"> <thead> <tr> <th>ID</th> <th>NAME</th> <th>AGE</th> </tr> </thead> <tbody> <tr> <td> <input ng-model="searchID"> </td> <td> <input ng-model="searchName"> </td> <td> <input ng-model="searchAge"> </td> </tr> <tr ng-repeat="item in peoples |filter: {id:searchID, name:searchName, age:searchAge} | filter:searchAll"> <td>{{item.id}}</td> <td>{{item.name}}</td> <td>{{item.age}}</td> </tr> </tbody> </table> </div> </body> </html>

CONTROLLER

var app = angular.module('plunker', ['ngAnimate']); app.controller('MainCtrl', function($scope) { $scope.name = 'World'; $scope.peoples = [ {id:1, name:'Kalesi', age:50}, {id:2, name:'Jon', age:43}, {id:3, name:'Jonas', age:34}, {id:4, name:'Sam', age:29}, {id:5, name:'Samuel', age:50}, {id:6, name:'Tyrion', age:20} ]; });

Collectives™ on Stack Overflow

Ng-repeat filter on multiple fields

3 Answers 3

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Related