angularjs过滤多个表达式

发布时间：2020-12-17 07:56:15 所属栏目：安全来源：网络整理

导读：我是angularjs的新手,只想帮助过滤… 我理解过滤的基础知识(这是非常基础的),但我想要做的是使用多个表达式进行过滤. HTML： body data-ng-init="phones = [{make:'Apple',model:'iPhone5'},{make:'HTC',model:'One'},{make:'Samsung',model:'GalaxyS4'}]" p

我是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’,则过滤器为空白.

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

干杯

至少你不能简单地使用滤镜滤镜的基本形式,因为AngularJS不能单独猜测空格是指“或”.

但是您不需要创建自己的指令. AngularJS 1.1.5为过滤器提供了第三个参数(参见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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!