0

I apologise if this has been answered already, but I'm new to Angular so might have missed it.

I have a need to provide multiple sets of checkbox lists, which need to be combined to create an AND query.

It's on Plunker here http://plnkr.co/OGmGkz22n4J4T8p74yto but enclosed below. At the moment I can select the bottom row and the correct names appear from storeArray, but I cannot work out how to add the Format array into the filter.

I've tried:

<div ng-repeat="store in storeArray | filter:(formatFilter && tillFilter)">

and

<div ng-repeat="store in storeArray | filter:formatFilter:tillFilter">

but they don't work.

Any suggestions please?

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

function MyCtrl($scope) {

  $scope.formatFilter = function(a) {
    for (var fmt in $scope.formatsArray) {

      var f = $scope.formatsArray[fmt];

      if (f.on && a.format.indexOf(f.name) > -1) {
        return true;
      }

    }
  };

  $scope.tillFilter = function(a) {
    for (var till in $scope.tillsArray) {

      var t = $scope.tillsArray[till];

      if (t.on && a.tills.indexOf(t.name) > -1) {
        return true;
      }

    }
  };

  $scope.formatsArray = [{
    name: "Super",
    on: false
  }, {
    name: "Express",
    on: false
  }, {
    name: "Other",
    on: false
  }];

  $scope.tillsArray = [{
    name: "Main",
    on: false
  }, {
    name: "Service",
    on: false
  }, {
    name: "Petrol",
    on: false
  }];

  $scope.storeArray = [{
    "id": "1",
    "name": "101",
    "format": "Super",
    "tills": ["Main", "Service", "Petrol"]
  }, {
    "id": "2",
    "name": "102",
    "format": "Express",
    "tills": ["Main", "Service"]
  }, {
    "id": "3",
    "name": "103",
    "format": "Other",
    "tills": ["Main", "Petrol"]
  }, {
    "id": "4",
    "name": "104",
    "format": "Super",
    "tills": ["Service", "Petrol"]
  }];

}
1
  • version of the angular you are using? Commented Jul 17, 2015 at 20:06

1 Answer 1

1

While you can chain filters together like this:

<div ng-repeat="store in storeArray | filter:formatFilter | filter:tillFilter)">

This won't fix your problem since the first filter will do it's job, and filter items out that you may want to include in your second filter. I'm not sure of any way to do an "or" filter. Is there any reason you can't do a custom filter that includes both? I modified your plunker with a custom filter:

http://plnkr.co/edit/han1LFl7toTsSX27b9Q0?p=preview

The code isn't super clean... it does the job. :) You may want to polish it up a bit.

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

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.