自定义 Angular 过滤器从未调用过？

Question

我有一个字符串数组，我想使用自定义 angular 过滤器按第一个字母进行过滤。

我有以下 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 甚至从未显示过.

缺少什么？

Answer 1

注意语法！

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

Answer 2

您需要 post 更多代码。您的问题很可能与您构建应用程序的方式有关。

这是一个类似的过滤器，可以满足您的需求：

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>

自定义 Angular 过滤器从未调用过？

Custom Angular filter never called?

javascript

angularjs

angularjs-filter