Custom Filter angular filtering on array selected

Question

Here is my fiddle http://jsfiddle.net/7mcj04or/

I cannot get this thing to work, I am attempting to create a custom filter on the checkboxes that I have selected. Here is my code:

HTML:

<div ng-controller="AppCtrl">
<label class="item-input-wrapper">
  <input type="text" placeholder="Search" ng-model="searchTerm">
</label>
<div ng-repeat="l in letter">
<input ng-model="letter" type="checkbox" ng-checked="exists(l,selected)" ng-click="toggle(l, selected)">Letter {{l}}
</div>
  <div ng-repeat="name in names | filter: searchTerm">
      <p>
      {{name}}
      </p>
  </div>
  <pre ng-bind="selected | json"></pre>
</div>

JS:

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

app.controller('AppCtrl', function ($scope, $http) {
$scope.searchTerm = '';
$scope.names = ['Jimmy','Farris','Lance', 'Joaquin', 'Henry'];
 $scope.letter = ['L','E','Y', 'H', 'U'];
$scope.selected = [];
$scope.toggle = function (item, list) {
    var idx = list.indexOf(item);
    if (idx > -1) {
      list.splice(idx, 1);
    }
    else {
      list.push(item);
    }
  };

  $scope.exists = function (item, list) {
    return list.indexOf(item) > -1;
  };

});

app.filter('selectedLetter', function () {
// filter to check array of elements
return function (selected) {


   return selected;
   }
});

I want my ng-repeat to look like this:

<div ng-repeat="name in names | filter: searchTerm">
      <p>
      {{name | selectedLetter}}
      </p>
</div>

That custom selected filter I am attempting to write is not filtering on what ever checkbox I select. So when I selected Letter L I want Lance to show up etc.

Again here is my fiddle the search works, just not the custom filter.

http://jsfiddle.net/7mcj04or/

Kevin Chiu · Accepted Answer · 2016-10-09 05:45:11Z

Sorry I didn't realize you had attempted to do the search through a filter and replaced what I had replaced the search functionality with the filter. I added your original pipe back in.

There's 2 ways as you have noticed to do this, one is to use your $scope method and one is to go through the a filter. Going through the filter route, you weren't using the empty filter you had declared below the controller. That was my confusion. Here's the updated code:

JS:

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

app.controller('AppCtrl', function($scope, $http) {
  $scope.searchTerm = '';
  $scope.names = ['Jimmy', 'Farris', 'Lance', 'Joaquin', 'Henry'];
  $scope.letter = ['L', 'E', 'Y', 'H', 'U'];
  $scope.selected = [];
  $scope.toggle = function(item, list) {
    var idx = list.indexOf(item);
    if (idx > -1) {
      list.splice(idx, 1);
    } else {
      list.push(item);
    }
  };

  $scope.exists = function(item) {
    return item.indexOf(item) > -1;
  };

});

app.filter('selectedLetter', function() {
  // filter to check array of   // filter to check array of elements

  return function(items, letter) {

    return items.filter(function(item) {
      return (item.length && letter.join('').indexOf(item.charAt(0)) == -1);
    });
  }
});

<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
</head>

<body ng-app="starter">
  <div ng-controller="AppCtrl">
    <label class="item-input-wrapper">
      <input type="text" placeholder="Search" ng-model="searchTerm">
    </label>
    <div ng-repeat="l in letter">
      <input ng-model="letter" type="checkbox" ng-checked="exists(l, selected)" ng-click="toggle(l, selected)">Letter {{l}}
    </div>
    <div ng-repeat="name in $names = (names | filter: searchTerm | selectedLetter:selected)">
      <p>
        {{name}}
      </p>
    </div>
    <pre ng-bind="selected | json"></pre>
  </div>

</body>

</html>

In the end, I would recommend choosing one of the two routes since you can pipe filters through. But directly using the filter you'll need to filter the array before you output, so that's why I set the variable to a copy in the ng-repeat. Hope this helps! (and again if the checkboxes aren't filtering right, just reverse my conditional in the filter)

Kevin Chiu · Accepted Answer · 2016-10-08 16:48:11Z

0

Try this http://jsfiddle.net/Iceman52489/k8r4qLge/4/

You're missing a filter and you were using the wrong syntax to filter.

answered Oct 8, 2016 at 16:48

Kevin Chiu

261 bronze badge

2 Comments

Ren44 Over a year ago

I'm not sure what you did here. I can't search anymore. And checkboxes aren't working correctly. I want the names to show and to be able to filter on checkboxes and search. This isn't doing that

Kevin Chiu Over a year ago

Look in the filter function. Reverse the Boolean return. What I did was hook up the filter. You weren't calling the filter in your jsfiddle and your filter had a blank function.

Collectives™ on Stack Overflow

Custom Filter angular filtering on array selected

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related