Angular Based Filter system using for individual data using multiple checkbox

Question

var app = angular.module('test',[]);

app.controller('testController',function($scope){
  $scope.users = [
    { 'name':'person1', 'sales': true, 'customer': false, 'vip': true },
    { 'name':'person2', 'sales': false, 'customer': true, 'vip': false },
    { 'name':'person3', 'sales': false, 'customer': true, 'vip': true },
    { 'name':'person4', 'sales': false, 'customer': false, 'vip': true },
    { 'name':'person5', 'sales': true, 'customer': true, 'vip': false },
    { 'name':'person6', 'sales': true, 'customer': false, 'vip': true },
  
  ];

});

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"></script>
</head>
<body>
	<div ng-app='test' ng-controller="testController">
    <h3>Groups</h3>
    <input type='checkbox' ng-model="customer">Customer
    <input type='checkbox' ng-model="sales">Sales
    <input type='checkbox' ng-model="vip">VIP
    <br>
    <input type='text' ng-model="searchTerm">
    <div>
      <ul>
        <li ng-repeat="user in users | filter:searchTerm"">
          {{user.name}}
        </li>
      </ul>
    </div>
  </div>
</body>
</html>

Here is the Code i need to filter by the groups...By checking the checkbox i need to filter the exact value of the dataset...if i click multiple checkbox i need to filter the multiple data which has the value...

same time if i didn't checked any checkbox need to show the all data...

Please anyone help....

Have you tried anything so far at implementing those filters? — Aurelio
– Aurelio, Commented Mar 6, 2017 at 9:31

tanmay · Accepted Answer · 2017-03-06 09:38:59Z

You can do something like this by creating a custom filter function. I don't like it the way it is solved.. I suspect if there's anything simpler possible.

var app = angular.module('test',[]);

app.controller('testController',function($scope){
  $scope.users = [
    { 'name':'person1', 'sales': true, 'customer': false, 'vip': true },
    { 'name':'person2', 'sales': false, 'customer': true, 'vip': false },
    { 'name':'person3', 'sales': false, 'customer': true, 'vip': true },
    { 'name':'person4', 'sales': false, 'customer': false, 'vip': true },
    { 'name':'person5', 'sales': true, 'customer': true, 'vip': false },
    { 'name':'person6', 'sales': true, 'customer': false, 'vip': true },
  
  ];

  $scope.myfilter = function(obj) {
    var val = true;
    if($scope.customer && !obj.customer || 
       $scope.sales && !obj.sales  || 
       $scope.vip && !obj.vip
    ) {
      val = false;
    } 
     
    return val;
  }

});

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"></script>
</head>
<body>
	<div ng-app='test' ng-controller="testController">
    <h3>Groups</h3>
    <input type='checkbox' ng-model="customer">Customer
    <input type='checkbox' ng-model="sales">Sales
    <input type='checkbox' ng-model="vip">VIP
    <br>
    <input type='text' ng-model="searchTerm">
    <div>
      <ul>
        <li ng-repeat="user in users | filter: myfilter | filter: searchTerm">
          {{user.name}}
        </li>
      </ul>
    </div>
  </div>
</body>
</html>

Shahzad · Accepted Answer · 2017-03-06 09:54:28Z

You can create a custom filter and filter using this

<div ng-app='test' ng-controller="testController">
    <h3>Groups</h3>
    <input type='checkbox' ng-model="searchCriteria.customer">Customer
    <input type='checkbox' ng-model="searchCriteria.sales">Sales
    <input type='checkbox' ng-model="searchCriteria.vip">VIP
    <br>
    <input type='text' ng-model="searchCriteria.searchText">
    <div>
        <ul>
            <li ng-repeat="user in users | searchTerm:searchCriteria">
                {{user.name}}
            </li>
        </ul>
    </div>
</div>


   var app = angular.module('test',[]);

   app.filter("searchTerm", function(){
    return function(items, searchCriteria){
    var filtered = [];

    angular.forEach(items, function(item){      
        var searchText = searchCriteria.searchText;
      var searchCustomer = searchCriteria.customer;
      var searchSales = searchCriteria.sales;
      var searchVip = searchCriteria.vip;

        var matchesSearchText = searchText ? item.name.indexOf(searchText) !== -1 : true;
      var customerMatch = searchCustomer ? item.customer : true;
      var salesMatch = searchSales ? item.sales : true;
      var vipMatch = searchVip ? item.vip : true;

      if(matchesSearchText && customerMatch && salesMatch && vipMatch){
            filtered.push(item);
        }
      });

      return filtered;
      };
    });

    app.controller('testController',function($scope){
      $scope.users = [
       { 'name':'person1', 'sales': true, 'customer': false, 'vip': true },
       { 'name':'person2', 'sales': false, 'customer': true, 'vip': false },
       { 'name':'person3', 'sales': false, 'customer': true, 'vip': true },
       { 'name':'person4', 'sales': false, 'customer': false, 'vip': true },
       { 'name':'person5', 'sales': true, 'customer': true, 'vip': false },
       { 'name':'person6', 'sales': true, 'customer': false, 'vip': true },

     ];

     $scope.searchCriteria = {
       customer: false,
       sales: false,
       vip: false,
       searchText: ''
     };

    });

its not fulfill my requirment sorry to saying this....but this works great....

Collectives™ on Stack Overflow

Angular Based Filter system using for individual data using multiple checkbox

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related