AngularJS ng-repeat filtering by text and multiple checkboxes

Question

I have a set of data with attributes such as name, year, height, weight and sport. There will be two or more sport types in my data, and I would like to be able to narrow down the result of ng-repeat using checkboxes as well as a text search. As an angular noob I'm having trouble setting this up. The working code I have so far is pretty minimal. Is there a simple way of doing this? Is there a simple way of making this work with just two sports? (The two checkboxes are not currently linked to anything, they are just examples of the current html).

index.html

<div ng-controller="controller">
<input class="p-search" ng-model="query" placeholder="search anything">

<input class="sport-toggle baseball" type="checkbox" checked>
<input class="sport-toggle football" type="checkbox" checked>

<div class="player-card" ng-repeat="player in roster | filter: query">
    <div>player {{info}}</div>
</div>
</div>

controller.js

var rosterfy = angular.module('rosterfy', []);
rosterfy.controller('controller', function controller($scope) {
$scope.roster = [
    {
...a bunch of json data....
}
];
});

$scope.roster = [ { 'name' : 'john smith', 'height' : "5'4''", 'weight' : '137', 'game' : 'baseball' }, { 'name' : 'steve jones', 'height' : "6'5''", 'weight' : '182', 'game' : 'football' }, { 'name' : 'jimmy bob', 'height' : "5'11''", 'weight' : '149', 'game' : 'baseball' } ]; — user5099484
– user5099484, Commented Sep 5, 2015 at 12:51

Arun James · Accepted Answer · 2015-09-04 06:16:07Z

1

Need to add ng-model on the checkboxes and input field and pass the query to filter: as an object. the properties of the query object should be same as the properties of the JSON. HTML:

<div ng-controller="controller">
   <input class="p-search" ng-model="query.Name" placeholder="search anything">

   <input class="sport-toggle baseball" type="checkbox" ng-model="query.check1" checked>
   <input class="sport-toggle football" type="checkbox" ng-model="query.check2" checked>

   <div class="player-card" ng-repeat="player in roster | filter: query">
   <div>player {{player.Name}}</div>
  </div>
</div>

Controller.js

var rosterfy = angular.module('rosterfy', []);
rosterfy.controller('controller', function controller($scope) {
  $scope.roster = [{
   Name:"Steve",
   check1:true,
   check2:false
   },{
   Name:"Michael",
   check1:false,
   check2:true
   },{
   Name:"James",
   check1:true,
   check2:false
   },{
   Name:"Peter",
   check1:true,
   check2:true
   }];
});

here's a JSBin working example : Example

answered Sep 4, 2015 at 6:16

Arun James

886 bronze badges

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

1 Comment

user5099484 Over a year ago

This is a good back up plan for me, but I was hoping to store the 'game' data as a string ex: {'game' : 'baseball'} and have the checkboxes match directly the string rather than {'baseball' : 'true', 'football' : false}

Collectives™ on Stack Overflow

AngularJS ng-repeat filtering by text and multiple checkboxes

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related