jeudi 19 mai 2016

Angular filter checkboxes

I have a group of checkboxes defined like this:

         span(ng-repeat='angle in anglesList')
            input(type='checkbox', ng-model='angle.selected')
            |  
            br
          hr

On the JS side:

$scope.anglesList = [
      {
        angle: "Angle 1",
        selected: true
      }, {
        angle: "Angle 2",
        selected: true
      }, {
        angle: "Angle 3",
        selected: true
      }, {
        angle: "Angle 4",
        selected: true
      }
    ];

And a filter on my ng-repeat of items:

.filter("angleFilter", function($filter) {
    return function(items, search) {
      var resultsAngle = [];
      if (!search) {
        return items;
      } else {
        for (var i = 0; i < items.length; i++) {
          for (var k = 0; k < items[i].angles.length; k++) {
            for (var j = 0; j < search.length; j++) {
              if (items[i].angles[k] === search[j].angle && search[j].selected === true) {
                var e = $filter('filter')(resultsAngle, {_id:items[i]._id});
                if (e.length > 0) {

                } else {
                  resultsAngle.push(items[i]);
                }
              }
            }
          }
        }
        return resultsAngle;
      }
    }
  })

On first load, because all of the angleList items in the angleList array are set to selected: true, they all load as checked. And as I uncheck them, the items disappear depending on if that item has that angle. This is inconvinient because if I want to only see the items that have Angle 4, I must manually uncheck Angle 1, Angle 2, and Angle 3. What I would like to have happen is for all of the checkboxes to be unchecked initially, but still have the items show up. Then when one check box is checked, filter down the items to just that one angle. Not sure how to do this. Thanks!




Aucun commentaire:

Enregistrer un commentaire