NickName:Tiago Ask DateTime:2015-05-16T00:21:45

Custom Angular filter never called?

I have an array of strings which I'd like to filter by first letter using a custom angular filter.

I have the following ng-repeat set up:

<div ng-repeat="proverb in proverbs | firstLetter">
  <a href="#/{{langID}}/{{$index}}">{{proverb}}</a>
</div>

And this is my custom filter, currently using a default letter "A" for testing purposes:

angular
  .module('raidersApp', [
    'ngRoute',
    'ngTouch',
    'ngResource'
  ])
  .filter('firstLetter', function () {
    return function (input) {
      input = input || [];
      letter = "A";
      var out = [];
      input.forEach(function (item) {
        console.log("current item is", item, item.charAt(0));
        if (item.charAt(0).toUpperCase() == letter) {
           out.push(item);
        }
      });
      return out;
    };
  })

The problem is, this filter is currently filtering everything out (the app works and there are no console errors but the ng-repeat section is blank), and the console.log is never even being displayed.

What's missing?

Copyright Notice：Content Author:「Tiago」，Reproduced under the CC 4.0 BY-SA copyright license with a link to the original source and this disclaimer.
Link to original article：https://stackoverflow.com/questions/30264315/custom-angular-filter-never-called

Answers

dting 2015-05-15T20:35:33

You need to post more of your code. Your problem is most likely an issue with how you structured your app. \n\nHere is a similar filter that does what I think you are looking for:\n\n\r\n\r\nvar app = angular.module('raidersApp', [])\r\n .controller('myController', function($scope) {\r\n $scope.langID = \"en\";\r\n $scope.proverbs = ['Apple', 'Apricot', 'Banana', 'Orange'];\r\n })\r\n .filter('firstLetter', function() {\r\n return function(input, letter) {\r\n return (input || []).filter(function(item) {\r\n return item.charAt(0).toUpperCase() === letter;\r\n });\r\n };\r\n });\r\n<html ng-app=\"raidersApp\">\r\n\r\n<body>\r\n <script src=\"https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js\"></script>\r\n <div ng-controller='myController'>\r\n <h3>A</h3>\r\n <div ng-repeat=\"proverb in proverbs | firstLetter: 'A'\">\r\n <a href=\"#/{{langID}}/{{$index}}\">{{proverb}}</a>\r\n </div>\r\n <h3>O</h3>\r\n <div ng-repeat=\"proverb in proverbs | firstLetter: 'O'\">\r\n <a href=\"#/{{langID}}/{{$index}}\">{{proverb}}</a>\r\n </div>\r\n </div>\r\n</body>\r\n\r\n</html>",