Пользовательский угловой фильтр никогда не вызывался?

У меня есть массив строк, которые я хотел бы отфильтровать по первой букве С помощью пользовательского углового фильтра.

У меня есть следующие настройки ng-repeat: 

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

И это мой пользовательский фильтр, в настоящее время использующий букву по умолчанию "A" для целей тестирования: 

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;
    };
  })
Проблема в том, что этот фильтр в настоящее время отфильтровывает все (приложение работает, и нет ошибок консоли, но раздел ng-repeat пуст), а console.log никогда даже не отображается.

Что такое пропал?

2 3
javascript angularjs angularjs-filter

2 ответа:

Вам нужно опубликовать больше кода. Ваша проблема, скорее всего, связана с тем, как вы структурировали свое приложение.

Вот похожий фильтр, который делает то, что я думаю, вы ищете: 

var app = angular.module('raidersApp', [])
  .controller('myController', function($scope) {
    $scope.langID = "en";
    $scope.proverbs = ['Apple', 'Apricot', 'Banana', 'Orange'];
  })
  .filter('firstLetter', function() {
    return function(input, letter) {
      return (input || []).filter(function(item) {
        return item.charAt(0).toUpperCase() === letter;
      });
    };
  });
<html ng-app="raidersApp">

<body>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
  <div ng-controller='myController'>
    <h3>A</h3>
    <div ng-repeat="proverb in proverbs | firstLetter: 'A'">
      <a href="#/{{langID}}/{{$index}}">{{proverb}}</a>
    </div>
    <h3>O</h3>
    <div ng-repeat="proverb in proverbs | firstLetter: 'O'">
      <a href="#/{{langID}}/{{$index}}">{{proverb}}</a>
    </div>
  </div>
</body>

</html>

Из того, что я могу сказать, ваш код работает как есть. 

var app = angular.module('raidersApp', [])
  .controller('myController', function($scope) {
    $scope.langID = "en";
    $scope.proverbs = ['Apple', 'Apricot', 'Banana', 'Orange'];
  })
  .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;
    };
  });
<html ng-app="raidersApp">

<body>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
  <div ng-controller='myController'>
    <div ng-repeat="proverb in proverbs | firstLetter">
      <a href="#/{{langID}}/{{$index}}">{{proverb}}</a>
    </div>
  </div>
</body>

</html>
2

Следите за своим синтаксисом!

input.forEach()

Бросал ошибку для меня.. также следите за объявлением глобальных переменных.

Попробуйте это: 

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

Http://plnkr.co/edit/XtFQlCWX27gEy0PeQCwv?p=preview

1