Question

我有一个字符串数组，我想使用自定义角度过滤器首字母过滤。

我设置了以下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甚至从未显示过。< / p>

缺少什么？

Answer 1

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

这是一个类似的过滤器，可以完成我认为您正在寻找的内容：

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>

Answer 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

从未调用自定义角度过滤器？

2 个答案: