3

我是 angularjs 的新手，只是想要一些过滤方面的帮助......

我了解过滤的基础知识（这是非常基础的），但我想做的是使用多个表达式进行过滤。

HTML：

<body data-ng-init="phones = [{make:'Apple', model:'iPhone5'}, {make:'HTC', model:'One'}, {make:'Samsung', model:'GalaxyS4'}]">
    <p>my first angular app</p>
    <p><label>filter</label><input data-ng-model="phoneFilter.$" type="text"></p>
    <ul>
        <li data-ng-repeat="phone in phones | filter:phoneFilter">
            {{phone.make}} {{phone.model}} 
        </li>
    </ul>
</body>

现在，如果我过滤“apple”或“iphone5”，它工作正常，但如果我一开始输入模型就输入“apple i”，过滤器是空白的。

我需要为此创建一个自定义过滤器吗？

干杯

4

1 回答 1

2

至少你不能简单地使用 filter 的基本形式filter，因为 AngularJS 不能单独猜测空格的意思是“或”。

但是您不需要创建自己的指令。AngularJS 1.1.5 提供了第三个参数filter（参见文档）。它可以采用一个函数，“将给出对象值和谓词值进行比较，如果项目应包含在过滤结果中，则应返回 true”。然后，您所要做的就是：

$scope.multipleChoicesComparator = function (expected, actualInCompactForm)
{
    // Get a list of predicates
    var listActual = actualInCompactForm.split(' ');
    var mustBeIncluded = false;

    angular.forEach(listActual, function (actual)
    {
        // Search for a substring in the object value which match
        // one of the predicate, in a case-insensitive manner
        if (angular.lowercase(expected).indexOf(angular.lowercase(actual)) !== -1)
        {
            mustBeIncluded = true;
        }
    });

    return mustBeIncluded;
};

<li data-ng-repeat="phone in phones | filter:phoneFilter:multipleChoicesComparator">
    {{phone.make}} {{phone.model}} 
</li>

Fiddle

于 2013-08-01T13:06:42.747 回答