Angularjs过滤名称的一部分答案

【问题标题】：Angularjs filter part of nameAngularjs过滤名称的一部分
【发布时间】：2013-12-30 15:24:17
【问题描述】：

我在这里有一个 jsFiddle - http://jsfiddle.net/GRw64/

我是 Angularjs 的新手，所以还在找我的脚

我的示例是客户名称的简单 ng-init。

一个输入字段和一个 ng-repeat，用于根据客户姓名过滤输入字段中的名称。

如果您在输入字段中键入名称，ng-repeat 会过滤列表以显示该名称。

如果我输入 Chris，列表中会显示名称“Chris Dave”和“Chris”。

如果我更改为“Chris Dave”，“Chris Dave”仍会显示在列表中，但“Chris”会消失

我怎样才能得到与搜索中至少一个词匹配的所有结果的返回。

<!doctype html>
<html ng-app>

<head>
    <script src="http://code.angularjs.org/1.2.6/angular.min.js"></script>
</head>

<body ng-app="" data-ng-init="customers=[{name:'Chris Dave'},{name:'Chris'},{name:'John'},{name:'Paul'}]">

    <div class="container">

        Names:
        <br />

        <input type="text" data-ng-model="name" />

        <br />

        <ul>
            <li data-ng-repeat="cust in customers | filter:name">{{ cust.name }}</li>
        </ul>

    </div>

</body>

</html>

【问题讨论】：

标签： angularjs

【解决方案1】：

你也可以给Angular的filter过滤器提供一个函数：

ng-repeat="cust in customers | filter:filterByName"

然后你必须在你的控制器中定义函数：

$scope.filterByName = function(customer) {
  if(!$scope.name) {
    return true;
  } else {
    var keywords = $scope.name.toLowerCase().split(' ');

    for(var i in keywords){
        var k = keywords[i];
        if (customer.name.toLowerCase().indexOf(k) >= 0) {
            return true;
        }
    }
    return false;
  }
}

Working example

【讨论】：

【解决方案2】：

假设您将空格分隔的关键字视为 OR 关系，您可以创建一个自定义过滤器来实现您的需要，如下所示：

var app = angular.module('myApp', []);
app.filter('myFilter', function () {
    return function (names, keyword) {
        var listToReturn = [];
        if (keyword === undefined) return names;
        var keywords = keyword.toLowerCase().split(' ');
        angular.forEach(names, function (name) {
            for(var i in keywords){
                var k = keywords[i];
                if (name.name.toLowerCase().indexOf(k) >= 0) {
                    listToReturn.push(name);
                    break;
                }
            }
        });
        return listToReturn;
    };
});

DEMO

【讨论】：

zsong - 我喜欢你的解决方案，但我无法完全理解它。能不能简单解释一下。