Question

我有一个ng-repeat元素

我的单个元素包含一些属性

{
name: 'full name',
email: 'aaa@bbb.cc',
partner_name: 'partner'
}

我想要一个搜索所有字段的搜索。用户可以键入电子邮件或合作伙伴名称或名称。

我的代码：

    <div class="row">
<div class="col-xs-12"> <input type="text" ng-model="search.name"
                 placeholder="Quick Search user"
                 class="form-control" ></div>
</div>
</div>
<div ng-repeat="el in contacts | filter:search" class='partner-panel animate-repeat'>
    <div class="alert " ng-class="css" >
        <div class="name">
            (<span ng-bind="el.id"> </span>) <span ng-bind="el.name"></span>
        </div>
        <div ng-bind="el.email">
        </div>
        <div ng-bind="el.partner_name">
        </div>

</div>

Answer 1

根据documentation你应该使用

<input ng-model="search.$">

Answer 2

您需要输入name，mail和partner_name，您可以使用以下过滤器：

   ng-repeat="el in contacts | filter:{name: search.name, email: search.mail, partner_name: search.partner}"

Answer 3

您可以编写一个自定义过滤器，它将应用您需要的任何搜索逻辑：

app.filter('myFilter', function() {
    return function(contacts, search) {
        if (!search) {
            return contacts;
        }

        // search.name will contain the input entered in the field    
        var searchRegex = new RegExp(search.name, 'i');
        return contacts.filter(function(item) {
            // look for match in name or email properties of the contact
            return searchRegex.test(item.name) || searchRegex.test(item.email);
        });
    };
});

然后：

<div ng-repeat="el in contacts | myFilter:search">

通过这种方式，您可以使用一个搜索框来查看联系人模型的不同属性：

<input type="text" 
       ng-model="search.name"
       placeholder="Quick Search user"
       class="form-control" />

Answer 4

尝试使用：

// on event xyz.... jQuery(".common").hide(function(){ jQuery("#id3").show(); });

将字段放在AngularJS文档 {{ expression | filter1 | filter2 }}

中记录的三个过滤器中

角度过滤器由多个属性组成

4 个答案: