Question

我在这里有一个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>

Answer 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

Answer 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

Angularjs过滤部分名称

2 个答案: