从 Angular 中的字母过滤

Question

我已经在 Whosebug 上解决了其中的一些问题，并从一个线程中找到了这个 link：http://toddmotto.com/everything-about-custom-filters-in-angular-js/ 这很好，但我正在努力使其适应我需要做的事情。

我正在尝试基于它实现一个简单的功能，该功能将有一个按钮组，其中显示所有结果，然后从字母到字母，例如：

<button type="button" class="btn btn-primary">All</button>
<button type="button" class="btn btn-primary”>A-E</button>
  <button type="button" class="btn btn-primary">F-K</button>
    <button type="button" class="btn btn-primary">L-P</button>

但是我无法调整函数来执行此过滤器。我只能用单个字母来处理基本过滤器。

<button type="button" class="btn btn-primary" ng-click="letter = 'C'">C</button>

我也无法显示“所有结果” 这是我的应用程序代码：

var app = angular.module (‘app', []);

app.controller('PersonCtrl', function () {
    this.friends = [{
        name: 'Andrew'
    },
    {
        name: 'Bob'
    },{
        name: 'Beano'
    },{
        name: 'Chris'
    }, {
        name: 'Will'
    }, {
        name: 'Mark'
    }, {
        name: 'Alice'
    }, {
        name: 'Todd'
    }];
});
  app.filter('startsWithLetter', function () {
      return function (items, letter) {
          var filtered = [];
          var letterMatch = new RegExp(letter, 'i');
          for (var i = 0; i < items.length; i++) {
              var item = items[i];
              if (letterMatch.test(item.name.substring(0, 1))) {
                  filtered.push(item);
              }
          }
          return filtered;
      };
  });

HTML 控制器代码：

<div class="container" ng-controller="PersonCtrl as person">

<ul>
        <li ng-repeat="friend in person.friends | startsWithLetter:letter">
                {{ friend }}
        </li>
</ul>
</div>

我如何调整它以执行更具体的过滤？

Answer 1

您可以根据字母 ASCII 代码进行过滤。单击按钮时，使用 ng-click 指令和 - 分隔值（如 letter='65-69）设置 ASCII 代码的范围。然后该范围将通过过滤器，其中第一个参数是 upperLimit，第二个参数是所选范围的 lowerLimit。为了比较起始变量 ASCII 的值，我们可以使用 string.charCodeAt('0') 方法，该方法将 return 第一个字符的 ASCII 值，并将该值与 foreach 循环内的范围变量进行比较。

标记

<div class="container" ng-controller="PersonCtrl as person">
    <ul>
      <li ng-repeat="friend in person.friends | startsWithLetter:letter">
        {{ friend }}
      </li>
    </ul>
    <button type="button" class="btn btn-primary" ng-click="letter=''">All</button>
    <button type="button" class="btn btn-primary" ng-click="letter='65-69'">A-E</button>
    <button type=" button " class="btn btn-primary" ng-click="letter='70-75'">F-K</button>
    <button type="button " class="btn btn-primary " ng-click="letter='76-80'">L-P</button>
</div>

过滤器

app.filter('startsWithLetter', function() {
  return function(items, letter) {
    if (!letter || letter.length == 0)
      return items;
    var filtered = [],
      range = letter.split('-');
    var letterMatch = new RegExp(letter, 'i');
    for (var i = 0; i < items.length; i++) {
      var item = items[i];
      for (var j = parseInt(range[0]); j <= parseInt(range[1]); j++) {
        if (item.name.charCodeAt('0') == j) {
          filtered.push(item);
        }
      }
    }
    return filtered;
  };
});

Working PLunkr

Answer 2

您可以使用冒号将多个参数传递给过滤器 - fromLetter 和 toLetter 以及您的输入。

<li ng-repeat="friend in person.friends | startsWithLetter:person.fromLetter:person.toLetter">
    {{ friend }}
</li>

然后你可以将字符串的第一个字母小写并直接与fromLetter和toLetter

进行比较

app.filter('startsWithLetter', function () {
    return function (items, fromLetter, toLetter) {
        var filtered = [];
        for (var i = 0; i < items.length; i++) {
            var item = items[i];
            var firstLetter = item.name.substring(0, 1).toLowerCase();
            if ((!fromLetter || firstLetter >= fromLetter)
                && (!toLetter || firstLetter <= toLetter)) {
                filtered.push(item);
            }
        }
        return filtered;
    };
});

也就是说按钮逻辑需要稍微复杂一点，设置两个变量：

<button type="button" class="btn btn-primary" ng-click="person.setLetters()">All</button>
<button type="button" class="btn btn-primary" ng-click="person.setLetters('a','e')">A-E</button>
<button type="button" class="btn btn-primary" ng-click="person.setLetters('f','k')">F-K</button>
<button type="button" class="btn btn-primary" ng-click="person.setLetters('l','p')">L-P</button>

在你的控制器上：

this.setLetters = function(from, to){
    this.fromLetter = from;
    this.toLetter = to;
};

JSFiddle

从 Angular 中的字母过滤

Filtering from to letter in Angular

filter

angularjs

ng-repeat

angularjs-filter