CODEWITHSUNDEEP
javascripthtmlangularjsfilter
Ren44
Ren44

Reputation: 107

Custom Filter angular filtering on array selected

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/

Upvotes: 0

Views: 848

Answers (2)

Kevin Chiu
Kevin Chiu

Reputation: 26

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)

Upvotes: 1

Kevin Chiu
Kevin Chiu

Reputation: 26

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

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

Upvotes: 0

Related Questions