通过字符进行Angular过滤器匹配？

Question

通过字符进行Angular过滤器匹配？

4

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

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

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

        }
     ]

我希望筛选器执行以下操作：

当我开始输入字母“s”时，我希望丹尼·戴维斯（Danny Davids）消失，现在默认行为是两个都显示（“s”在丹尼姓氏的末尾）。

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

如果输入框中没有值，则要查看所有内容；如果我开始输入，我希望通过名字和姓氏来精确查看一个人。

在Angular 1.3中是否有此默认筛选器？

- totothegreat

你想只根据首字母进行过滤吗？ - user3196599

试试这个问题：https://dev59.com/ZH7aa4cB1Zd3GeqPxf7U - user3196599

我希望筛选器可以按名字（姓氏或名字）进行筛选，也就是说，如果用户的名字中包含s，则显示给我。 - totothegreat

2

编写一个自定义的 $filter 函数，仅选择那些对象。 - ryanyuyu

5个回答

4

你可以通过任何字符来筛选匹配项：

示例条件：

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

示例：

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

- Majedur

3

使用此自定义筛选器以获得以特定字符开头的匹配结果。

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

- Manoj Kumar Singh

1

如果这符合您的需求，您可以创建自定义过滤器。以下是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

        }
     ]

});

- Girdhar Singh Rathore

1

这非常接近我需要的，我不仅需要第一个字母，我需要其后的所有单词，例如我键入“sa”，我希望看到“sanny”。 - totothegreat

0

需要创建一个自定义过滤器函数来实现这个功能。在 Angular 中没有默认方法来匹配第一个字符。

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

- Karthikvenkat86

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- ryanyuyu · Accepted Answer

我建议使用自定义过滤器函数来使用 $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>

一个通过plnkr演示的示例