Question

我在Stackoverflow上遇到过一些问题，并从一个帖子{{3}}找到了这个链接，这很棒，但我很难适应我需要做的事情。

我正在尝试实现一个基于它的简单函数，该函数将具有一个按钮组，该按钮组显示所有结果然后来自以下字母：

<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代码进行过滤。点击按钮，使用ASCII指令设置ng-click代码的范围，-分隔值，如letter='65-69。然后该范围将通过过滤器，其中第一个参数是upperLimit＆amp;第二个是所选范围的lowerLimit。为了比较起始变量ASCII值，我们可以使用string.charCodeAt('0')方法，该方法将返回第一个字符的ASCII值＆amp;将该值与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中的字母

2 个答案: