Using filters in angularjs with hardcoded checkboxes

Question

I have a checkbox list that I would like to use to filter a list. the checkbox list is hard codes and looks like this:

<input type="checkbox" ng-model="characteristics.nontraditional" ng-true-value="non-tradtional" ng-false-value="">&#160; Non Traditional<br>
<input type="checkbox" ng-model="characteristics.metal" ng-true-value="metal" ng-false-value="">&#160; Metal<br>
<input type="checkbox" ng-model="characteristics.plancha" ng-true-value="plancha" ng-false-value="">&#160; Plancha<br>
<input type="checkbox" ng-model="characteristics.rocket" ng-true-value="rocket" ng-false-value="">&#160; Rocket<br>
<input type="checkbox" ng-model="characteristics.wick" ng-true-value="wick" ng-false-value="">&#160; Wick

I have my ng-repeat looking like this:

<div ng-repeat="stove in stoves | filteredstoves:characteristics">

and my custom filter looking like this:

stovecat.filter('filteredstoves', function() {
  return function(stoves, characteristics) { 
    alert(characteristics)
         }
    } 
}

When I load the page. The alert contains "undefined" which is expected as no checkbox has been selected. When I select one or more checkboxes, the alert contains [Object object], which is fine as an object is now passed into the custom filter. How do I access these values passed into my custom filter so that I can filter the list accordingly? Is there something I'm missing?

Thanks folks!

which values you want to access ??

Ajay Singh Beniwal
– Ajay Singh Beniwal

2013-07-11 12:18:35 +00:00
Commented Jul 11, 2013 at 12:18 — Ajay Singh Beniwal
– Ajay Singh Beniwal, Commented Jul 11, 2013 at 12:18
Answer here.

rGil
– rGil

2013-07-11 14:15:13 +00:00
Commented Jul 11, 2013 at 14:15 — rGil
– rGil, Commented Jul 11, 2013 at 14:15

Macros · Accepted Answer · 2013-07-11 12:39:46Z

Plunker with solution: http://plnkr.co/edit/7PhNEADHW099w9kaqS7M?p=preview

template:

<input type="checkbox" ng-model="characteristics.nontraditional">&#160; Non Traditional</input><br>
<input type="checkbox" ng-model="characteristics.metal">&#160; Metal</input><br>
<input type="checkbox" ng-model="characteristics.plancha">&#160; Plancha</input><br>
<input type="checkbox" ng-model="characteristics.rocket">&#160; Rocket</input><br>
<input type="checkbox" ng-model="characteristics.wick">&#160; Wick</input><br/>

<div ng-repeat="stove in stoves | filteredstoves:characteristics">{{stove.name}} - {{stove.characteristics}}</div>

filter:

stovecat.filter('filteredstoves', function() {
  return function(stoves, characteristics) {
    var result = stoves.slice(); // copy array
    angular.forEach(characteristics, function(value, key) {
      if(value) {
        for(var index = 0; index < result.length; index++) {
          stove = result[index];
          if(stove.characteristics.indexOf(key) == -1) {
            result.splice(index--,1);
          }
        }
      }
    });
    return result;
  }
});

Just go through all characteristics in filter and remove the items without them

Collectives™ on Stack Overflow

Using filters in angularjs with hardcoded checkboxes

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related