CODEWITHSUNDEEP
javascripthtmlangularjsangularjs-filterplunker
Nitesh Kadam
Nitesh Kadam

Reputation: 25

Dynamically set a filter in angularjs

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.

Upvotes: 1

Views: 227

Answers (2)

Partha Sarathi Ghosh
Partha Sarathi Ghosh

Reputation: 11586

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.

Upvotes: 1

Tasnim Reza
Tasnim Reza

Reputation: 6060

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

Upvotes: 0

Related Questions