Dynamically set a filter in angularjs

Question

I want to filter the table according to the criteria selected in the dropdown. Writing val in the newList function does not filter the table. Any Suggestions how to go through this.

HTML

<tbody>

  <tr ng-repeat="friendObj in newfriends">

    <td>{{friendObj.name}}</td>

    <td>{{friendObj.phone}}</td>

    <td>{{friendObj.age}}</td>
  </tr>

</tbody>

JS

 $scope.newList = function (val) {
      alert(val);
$scope.newfriends = $filter('filter')($scope.friends, {
    val: $scope.searcha
})

If you create proper search model like search.name then you don't need to use $filter in your controller, check my answer. — Tasnim Reza
– Tasnim Reza, Commented Nov 4, 2015 at 6:36

Partha Sarathi Ghosh · Accepted Answer · 2015-11-04 08:50:04Z

1

As per your code, you are trying to add criteria multiple times, then you want to filter with those criteria.

Here in your JSON there is only 3 property. {name, phone, and age}.

So your criteria should not exceed 3 row and it should not have same thing twice. If you do that you need to build your own filter. Use following code

$scope.newList = function() {
  var searchBy = {};
  angular.forEach($scope.newCriteria, function(criteria, key) {
    searchBy[criteria.name] = criteria.value;
  });
  $scope.newfriends = $filter('filter')($scope.friends, searchBy);
}

And HTMl as follows

<div id="searchy">

<ul class="list-unstyled">
  <li style="display: inline-block" ng-repeat="crtia in newCriteria">
    <table>
      <tr>

        <td>
          <select ng-model="crtia.name" ng-options="searchopt for searchopt in searchcriteria " ng-click="searchy.check()"></select>
        </td>
        <td>
          <input ng-model="crtia.value" placeholder="{{crtia.name}}" ng-change="newList()" />
        </td>

      </tr>
    </table>
  </li>
</ul>  <button ng-click="searchy.generate()">Add Criteria</button> </div>

Here is the updated plunker. http://plnkr.co/edit/r5OcI366dyvLQ24fFIje?p=preview.

edited Nov 4, 2015 at 8:50

answered Nov 4, 2015 at 6:12

Partha Sarathi Ghosh

11.7k22 gold badges64 silver badges84 bronze badges

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

2 Comments

Nitesh Kadam Over a year ago

searchBy[value.name] = value.value; Can you tell me what this statement does

Partha Sarathi Ghosh Over a year ago

newCriteria is your criteria array which contains multiple {name, value} object. While applying filter you need to construct an object like {age: 18}. Where age is your criteria name and 18 is the value. So I did. searchBy[value.name] = value.value. [Here the first value is each instance of newCriteria] and second value is 18 (Entered by user). Modifying the code sample for better understanding.

Tasnim Reza · Accepted Answer · 2015-11-04 06:35:37Z

0

Probably you want to filter based on dropdown selection, then create proper search model like

<select ng-model="selectedsearchcriteria"
        ng-options="searchopt for searchopt in searchcriteria "></select>

<!--When you select dropdown 'selectedsearchcriteria' update like 'name', 'age' and so on
then ng-model="search[selectedsearchcriteria]" forms like search.name, search.age and so on-->
<input name="search" ng-model="search[selectedsearchcriteria]" placeholder="{{selectedsearchcriteria}}" />

<!--Here 'filter:search:strict' filter like search.name it is like property based filter-->

<tr ng-repeat="friendObj in newfriends |filter:search:strict">

Also i think you don't need to use $filter('filter') in your controller

Check update plunker

answered Nov 4, 2015 at 6:35

Tasnim Reza

6,0603 gold badges27 silver badges31 bronze badges

2 Comments

Nitesh Kadam Over a year ago

Actually I had to filter in the controller

Tasnim Reza Over a year ago

But the code inside $scope.newList = function() you wrote can be achieved without filtering in controller. If you want to show already selected filter use search object.

Collectives™ on Stack Overflow

Dynamically set a filter in angularjs

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related