角度过滤器按字符匹配？答案

【问题标题】：Angular filter match by character?角度过滤器按字符匹配？
【发布时间】：2015-08-04 12:38:10
【问题描述】：

我有 angular 1.3，我有以下数组：

     data : [
        {
           id :2,
           name : "danny davids",
           age :9

        },
{
           id :3,
           name : "sanny gordon",
           age :9

        }
     ]

我希望过滤器执行以下操作：

当我开始写单词“s”时，我希望 danny davids 消失，现在默认行为是，它们仍然显示（s 在 danny 的姓氏末尾）。

严格模式是我不想使用的东西，我想要的行为是：

如果输入中没有值，我想查看全部，如果我开始写，我想查看 firstName/lastName 的确切值。

在 Angular 1.3 中有默认过滤器吗？

【问题讨论】：

所以你只想按第一个字符过滤？
试试这个问题stackoverflow.com/questions/23242721/…
我希望过滤器以名字/姓氏为基础，这意味着，如果 s 在用户的名字（或用户的姓氏）中，则显示给我跨度>
编写一个自定义的$filter 函数，只选择那些对象。

标签： angularjs filter

【解决方案1】：

您可以按任何字符过滤匹配：

样本条件：

yourDataList.display.toLowerCase().indexOf(searchData) !== -1;

例子：

 function createFilterForAnycharacters(searchData) {
        var lowercaseQuery = query.toLowerCase();
        return function filterFn(yourDataList) {
            return (yourDataList.display.toLowerCase().indexOf(searchData) !== -1);
        };
    }

【讨论】：

【解决方案2】：

我建议您通过自定义过滤功能使用$filter ng-repeat。根据文档，$filter 预计

function(value, index, array)：谓词函数可用于编写任意过滤器。为数组的每个元素调用该函数，并将元素、其索引和整个数组本身作为参数。

并且只显示返回 true 的元素。所以你所要做的就是编写那个函数。

您的过滤器函数可能如下所示：

$scope.filterData = function (obj) {
  return anyNameStartsWith(obj.name, $scope.searchFilter);
};

function anyNameStartsWith (fullname, search) {

  //validate if name is null or not a string if needed
  if (search === '')
    return true;

  var delimeterRegex = /[ _-]+/;
  //split the fullname into individual names
  var names = fullname.split(delimeterRegex);

  //do any of the names in the array start with the search string
  return names.some(function(name) {
      return name.toLowerCase().indexOf(search.toLowerCase()) === 0;
  });
}

您的 HTML 可能如下所示：

<input type="text" ng-model="searchFilter" />
<div ng-repeat="obj in data | filter : filterData">
    Id: {{obj.id}}
    Name: {{obj.name}}
</div>

demo via plnkr

【讨论】：

这是一个很好的答案，帮助我接近了我想要的结果，但是在你的 plnkr 中，如果我在搜索中输入“sam dar”，我希望看到“samantha darcy”你有任何关于如何实现这一目标的想法？我已经尝试解决它好几个小时了！
@AdrianE.LabastidaCañizares 这将需要更多的字符串处理。这可能是一个足够大的变化，您可以提出一个新问题。您可以链接到此问题和答案以获取上下文。首先，您可能需要修改过滤功能以拆分名称和搜索文本。

【解决方案3】：

使用此自定义过滤器获取结果匹配起始字符p>

app.filter('startsWithLetter', function () {
    return function (items, letter) {
        var filtered = [];
        for (var i = 0; i < items.length; i++) {
            var item = items[i];
            if (item.substr(0,letter.length).toLowerCase() == letter.toLowerCase()) {
                filtered.push(item);
            }
        }
        return filtered;
    };
});

【讨论】：

【解决方案4】：

它适用于您的场景，您可以创建自定义过滤器

下面是html代码

<div ng-app="app">
    <div ng-controller="PersonCtrl as person">
        <input type="text" ng-model="letter" placeholder="Enter a letter to filter">
        <ul>
           <li ng-repeat="a in person.data | startsWithLetter:letter"> 
                {{a.name}}
            </li> 
        </ul>
    </div>
</div>

js代码

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

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;
    };
});

app.controller('PersonCtrl', function () {

    this.data = [
        {
           id :2,
           name : "danny davids",
           age :9

        },
        {    
           id :3,
           name : "sanny gordon",
           age :9

        }
     ]

});

【讨论】：

这和我需要的非常接近，我不需要第一个字母，我需要所有后续词，如果我写 sa 我想看 sanny

【解决方案5】：

需要创建一个自定义过滤函数来执行此操作。没有默认方法来匹配angular中的第一个字符。

https://docs.angularjs.org/guide/filter

【讨论】：