akuljana akuljana - 2 months ago 16
AngularJS Question

Angular "multiple" value filter

I need some help with angular filter. I need to filter array by multiple values in one field.

Array looks like this:

$scope.items = [{
"item": "one",
"tags": "2,5"
}, {
"item": "two",
"tags": "3,4,6,7"
}, {
"item": "three",
"tags": "1,3,5"
}];


I want to search items by tags that are separated by comma.

Example: in search field user input tags separated with comma (or select by checkbox) and select tags 1 and 3. How to list all items that have those tags? In this example second and third item.

Plunker

https://plnkr.co/edit/6SidABYsjtrjtH3xqusA?p=preview

Answer

Here is your required answer using the checkboxes.

angular.module('app', [])
  .controller('Controller', function($scope) {
    $scope.items = [{
      "name": "one",
      "tags": "2,5"
    }, {
      "name": "two",
      "tags": "3,4,6,7"
    }, {
      "name": "three",
      "tags": "1,3,5"
    }];

    $scope.items_dup = $scope.items
    // checkbox selection
    $scope.selection = [];
    $scope.toggleSelection = function toggleSelection(filter) {
      var idx = $scope.selection.indexOf(filter);
      if (idx > -1) {
        $scope.selection.splice(idx, 1);
      } else {
        $scope.selection.push(filter);
      }
    };

    // filter list
    $scope.filter = function() {
      filterTag($scope.selection,$scope.items);
      function filterTag(selected,items){
        var out = [];
        angular.forEach(items, function(value, key) {
          angular.forEach(selected, function(inner_value, key) {
            if(value.tags.split(',').indexOf(inner_value.toString()) > -1)
            {
              if(out.indexOf(value) == -1)
              {
                out.push(value)
              }
            }
          })
        })
        if(out.length > 0)
        {
          $scope.items_dup = out;
        }
        else
        {
          $scope.items_dup = $scope.items;   
        }
      }
      
    };
  })
<!DOCTYPE html>
<html>

<head>
  <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script>
</head>
<body ng-app="app">
  <div ng-controller="Controller">
    <h1>Tag filter!</h1>
    <li ng-repeat="item in items_dup">
      {{item.name}}
    </li>
    <hr>
    <p>Select filter</p>
    <label>
      <input type="checkbox" value="1" ng-click="toggleSelection(1)"> 1
    </label>
    <br>
    <label>
      <input type="checkbox" value="2" ng-click="toggleSelection(2)"> 2
    </label><br>
    <label>
      <input type="checkbox" value="3" ng-click="toggleSelection(3)"> 3
    </label>
    <br><br>
    <button ng-click="filter()">Filter list</button>
  </div>
</body>

</html>

Please run the code snippet and check.

Here is the plunker

Comments