AngularJS filter based on the column displayed

Question

Please refer to this Plunk: http://plnkr.co/edit/5YCCdDSnpHKRU51R9vCL?p=preview

How do I filter based on the field that is displayed? Currently, the filtering is done on the complete user object.

For eg:

$scope.users1 = [
  {name: 'Dave', id: 24},
  {name: 'Tim', id: 22},
  {name: 'Laura', id: 20}
];

<user-info-card users="users" label="name">
</user-info-card>

If I display only the id, the filter works even if I type "Dave". I want it to work only on the fields displayed. Also want it to be generic. It could be a different object but the search term should look at the label field and filter accordingly

Look on custom filters and try to implement yours

Diana R
– Diana R

2015-11-10 15:32:01 +00:00
Commented Nov 10, 2015 at 15:32 — Diana R
– Diana R, Commented Nov 10, 2015 at 15:32
Those Fields will always be the same? name and id?

Ignacio Villaverde
– Ignacio Villaverde

2015-11-10 15:35:11 +00:00
Commented Nov 10, 2015 at 15:35 — Ignacio Villaverde
– Ignacio Villaverde, Commented Nov 10, 2015 at 15:35
Hi Ignacio. The requirement says that they might change.

takeradi
– takeradi

2015-11-10 15:49:43 +00:00
Commented Nov 10, 2015 at 15:49 — takeradi
– takeradi, Commented Nov 10, 2015 at 15:49

Fraction · Accepted Answer · 2015-11-10 15:56:12Z

1

Added a function which will sort based on label, hope if suffice.

http://plnkr.co/edit/iCepagIKA1OFDjBnB35I?p=preview

$scope.searchTerm = function(item) {        
  if(item[$scope.label].toString().
    startsWith($scope.searchCondition1)){
          return true;
        }
        else{
          return false;
        }
}

answered Nov 10, 2015 at 15:56

Fraction

4632 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

codeninja.sj · Accepted Answer · 2015-11-10 17:38:41Z

0

You can use strict filter to do this stuff.

test.html

<div>
 <input placeholder="Search for a name..." ng-model="searchTerm" ng-change="onChange()">
  <div ng-repeat="user in users | filter:user:strict">
    ...
  </div>
</div>

During text box key change event, search term is converted as object field value.

script.js

$scope.onChange = function () {
      var user = {};
      user[$scope.label] = $scope.searchTerm;
      $scope.user = user;
     };

Check this link

edited Nov 10, 2015 at 17:38

answered Nov 10, 2015 at 17:30

codeninja.sj

4,1891 gold badge23 silver badges40 bronze badges

Collectives™ on Stack Overflow

AngularJS filter based on the column displayed

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related