Question

我是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'，则过滤器为空白。

我是否需要为此创建自定义过滤器？

干杯

Answer 1

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

但您不需要创建自己的指令。 AngularJS 1.1.5为filter提供了第三个参数（参见documentation）。它可以采用一个函数，“将给出对象值和谓词值进行比较，如果项目应包含在过滤结果中，则应返回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

angularjs过滤多个表达式

1 个答案: