How to create checkbox filter for ng-repeat list using angularjs?

Question

I'm trying to create checkbox for ng-repeat list. I'm facing some issues.

HTML

<input type="text" ng-model="findname" placeholder="Search Name"  />
<ul>
    <li class="no-decoration" ng-repeat="tech in technologyArray">
    <label>
        <input type="checkbox" ng-model="tech.on" />{{tech.u_proffession}}
    </label>
    {{tech.on}}
    </li>
</ul>
<ul>
    <li  ng-repeat="stu in students  | filter:findname | filter:myFunc ">                
        <strong>Name :{{stu.u_name}}</strong><br />
    </li>
</ul>

JS

var ngApp = angular.module('angapp',[]);
ngApp.controller('angCtrl',function($scope,$http){
    $scope.myFunc = function(a) {
    for(tech in $scope.technologyArray){
            var t = $scope.technologyArray[tech];
            if(t.on && a.technology.indexOf(t.u_proffession) > -1){
                return true;   
            }               
        }
    };
    $scope.technologyArray = [{ u_proffession: "developer", on: false}, {u_proffession:"driver", on:false}];
    $http.get("data.php").then(function(response) {
        $scope.students= response.data.records
    });
});

JSON ARRAY

{"records":[{"u_name":"adrian","u_mail":"[email protected]","u_proffession":"developer"},{...}]}

1000 Rows

The simple search ng-model="findname" is working fine when i remove the checkbox filter inside the ng-list | filter:myFunc. But when i add both of them in ng-list then no data showing in student list and also text search does not working. I wanted to use both of them.

Can anyone guide me where i'm wrong that i can fix my issue. I would like to appreciate if someone guide me. Thank You.

filter:myFunc is a function shouldn't it be like this way filter:myFunc() ? — Jorawar Singh
– Jorawar Singh, Commented Jul 27, 2016 at 14:47

Lex · Accepted Answer · 2016-07-28 05:35:30Z

2

I am definitely not a fan of putting filter functions in controllers. In that vein, I would recommend writing an actual filter.

angular.module('app', [])
  .controller('ctrl', function($scope) {
    $scope.technologyArray = [{
      u_proffession: "developer",
      on: false
    }, {
      u_proffession: "driver",
      on: false
    }];
    $scope.students = [{
      "u_name": "adrian",
      "u_mail": "[email protected]",
      "u_proffession": "developer"
    }, {
      "u_name": "adam",
      "u_mail": "[email protected]",
      "u_proffession": "driver"
    }, {
      "u_name": "alex",
      "u_mail": "[email protected]",
      "u_proffession": "developer"
    }, {
      "u_name": "allen",
      "u_mail": "[email protected]",
      "u_proffession": "driver"
    }];
  })
  .filter('customFilter', function() {
    return function(input, techs) {
      if(!techs || techs.length === 0) return input;
      var out = [];
      angular.forEach(input, function(item) {
        angular.forEach(techs, function(tech) {
          if (item.u_proffession === tech.u_proffession) {
            out.push(item);
          }
        });
      });
      return out;
    }
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <input type="text" ng-model="findname" placeholder="Search Name">
  <ul>
    <li ng-repeat="tech in technologyArray">
      <label>
        <input type="checkbox" ng-model="tech.on">{{tech.u_proffession}}
      </label>
    </li>
  </ul>
  <ul>
    <li ng-repeat="stu in students | filter:{u_name: findname} | customFilter:(technologyArray|filter:{on:true})">
      <strong>Name :{{stu.u_name}}</strong> ({{stu.u_proffession}})
    </li>
  </ul>
</div>

edited Jul 28, 2016 at 5:35

answered Jul 27, 2016 at 14:58

Lex

7,2732 gold badges31 silver badges49 bronze badges

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

6 Comments

Ayaz Ali Shah Over a year ago

Its working fine as i wanted only one thing wanted to ask that currently data is showing only when i filter by checkbox otherwise nothing to show. So is that possible to show all data on page load.

Lex Over a year ago

I updated the snippet. To show all items on page load just make the check boxes checked by default.

Ayaz Ali Shah Over a year ago

Now its showing only filtered record, i'm asking about all records, Also search filter does not working.

Ayaz Ali Shah Over a year ago

I wanted to show all the records on page load that i can filter the data from the records other wise page will be blank.

Lex Over a year ago

I'm not sure I'm understanding, but I've modified the way the filter works. Only those check boxes that are checked will be passed to the custom filter. If no check boxes are passed then nothing is filtered by the custom filter. The search filter is working fine when I run the code snippet so I'm not sure why it's not working when you do.

|

Collectives™ on Stack Overflow

How to create checkbox filter for ng-repeat list using angularjs?

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related