AngularJs，过滤不区分大小写 [英] AngularJs, filter case insensitive

问题描述

我有一个包含小写和大写数据的 json.例如:

<预><代码>[{ "firstName":"JoHn" , "lastName":"DoE" },{ "firstName":"aNnA" , "lastName":"smIth" },{ "firstName":"PeTer" , "lastName":"JOnes" }]

我有类似的东西:

搜索:<table id="searchTextResults"><tr><th>姓名</th><th>电话</th></tr><tr ng-repeat="朋友中的朋友 | filter:searchText"><td>{{friend.firstName}}</td><td>{{friend.lastName}}</td></tr>

我想做的是在不查看大写和小写的情况下搜索朋友.所以基本上当我在输入中输入John"、JOHN"或简单的john"时，它应该返回我的朋友 John.

那么是否可以将不区分大小写的选项应用于过滤器?

解决方案

将函数名称传递给 filter，您在适用范围内定义该函数名称，在该范围内使用字符串的 toLowerCase.请参阅 ngFilter.函数签名是一个简单的 function (item) { ... }.

控制器中的示例 JS:

$scope.filterOnlyFoo = function (item) {返回项目 == "foo";}

示例 HTML:

<div data-ng-repeat="item in items | filter: filterOnlyFoo"></div>

示例Plunker

I've got an json full of datas with lowcase and upcase. For example :

[

  { "firstName":"JoHn" , "lastName":"DoE" }, 
  { "firstName":"aNnA" , "lastName":"smIth" }, 
  { "firstName":"PeTer" , "lastName":"JOnes" }

]

And I've got something similar to this :

Search: <input ng-model="searchText">
        <table id="searchTextResults">
          <tr><th>Name</th><th>Phone</th></tr>
          <tr ng-repeat="friend in friends | filter:searchText">
            <td>{{friend.firstName}}</td>
            <td>{{friend.lastName}}</td>
          </tr>
        </table>

What I want to do is to search a friend without looking at upcases and lowcases. So basically when I type "John", "JOHN" or simply "john" in my input, it should return my friend John.

So is it possible to apply a case insensitive option to a filter ?

解决方案

Pass a function name to filter which you define on an applicable scope, where you use string's toLowerCase. See ngFilter. The function signature is a simple function (item) { ... }.

Example JS in your controller:

$scope.filterOnlyFoo = function (item) {
    return item == "foo";
}

Example HTML:

<div data-ng-repeat="item in items | filter: filterOnlyFoo"></div>

Sample Plunker

这篇关于AngularJs，过滤不区分大小写的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！