Question

我有一个非常简单的html表，我想用几个输入字段进行过滤。使用这种结构，我希望几个填充的输入可以作为交集，我只看到两个条件的详细信息。但目前它正在作为联盟工作，所以我看到任何与任何输入文本匹配的细节。在阅读互联网时，我看到大多数人都有落后问题 - 当类似的代码作为交集时。所以我很遗憾默认情况下会出现哪种行为，以及解决我的任务的正确方法是什么。

HTML（我使用前4个输入进行过滤，没有用于在js部分过滤的特殊代码）：

<div class="row" ng-controller="ItemController as ItemCtrl">
<input type="text" placeholder="Search" ng-model="searchText.$">
<input type="text" placeholder="SubmittedBy" ng-model="searchText.fields.submitted_by">
<input type="text" placeholder="Description" ng-model="searchText.fields.description">
<input type="text" placeholder="Responsible" ng-model="searchText.fields.responsible">

<div class="table-responsive">
    <table class="table table-striped table-hover" id="tickets">
        <thead>
        <tr>
            <th><input type="checkbox" ng-model="selectedAll" ng-change="checkAll()" /></th>
            <th>#</th>
            <th>SubmittedBy</th>
            <th>Description</th>
            <th>Responsible</th>
            <th>DateToFix</th>
            <th>DateFound</th>
            <th>Fixed</th>
            <th>DateFixed</th>
            <th>Confirmed</th>
            <th>DateConfirmed</th>
        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="item in items | filter:(searchText||undefined)" id="{[{item.pk}]}" class="base" ng-class="{'info' : item.fields.fixed && !item.fields.confirmed, 'success' : item.fields.confirmed}">
            <td><input type="checkbox" ng-model="item.selected"></td>
            <td>{[{item.pk}]}</td>
            <td>{[{item.fields.submitted_by}]}</td>
            <td>{[{item.fields.description}]}</td>
            <td>{[{item.fields.responsible}]}</td>
            <td>{[{item.fields.date_to_fix | date:'EEEE, MMM d, y'}]}</td>
            <td>{[{item.fields.date_found | date:'EEEE, MMM d, y HH:mm:ss'}]}</td>
            <td><input type="checkbox" ng-model="item.fields.fixed" ng-change="ItemCtrl.fix(item.pk, item.fields.fixed)"></td>
            <td>{[{item.fields.date_fixed | date:'EEEE, MMM d, y HH:mm:ss'}]}</td>
            <td><input type="checkbox" ng-model="item.fields.confirmed" ng-change="ItemCtrl.confirm(item.pk, item.fields.confirmed)"></td>
            <td>{[{item.fields.date_fix_confirmed | date:'EEEE, MMM d, y HH:mm:ss'}]}</td>
        </tr>
        </tbody>
    </table>
</div>

我不认为我从服务器获取的数据与此相关，但如果需要，我会在此处发布。考虑到：

（SEARCHTEXT ||未定义）

我用它来过滤带有复选框的列（全部，已选中，未选中）和有或没有＆＃34;未定义＆＃34;工作原理是一样的。

以下是我的示例的plunker链接：http://plnkr.co/edit/22M3Nsl36OAK2aLrJz6T?p=info 我发现，一旦我排除＆＃34;字段＆＃34;我的问题就会消失。来自＆＃34;数据＆＃34;并使用这样的值：

        <td>{{item.submitted_by}}</td>
        <td>{{item.description}}</td>
        <td>{{item.responsible}}</td>

但这是我不想做的事情，因为我必须在服务器端更改它。

Answer 1

当您使用具有嵌套对象的搜索表达式时，Angular将在筛选列表中返回与这些嵌套对象中的至少一个属性匹配的所有项目。

例如，如果您有这样的搜索对象：

{
  fields: {
    propA: 'bananas',
    propB: 'apples'
  }
}

在项目列表中有这样的对象：

{
  fields: {
    propA: 'orange',
    propB: 'apples'
  }
}

过滤器会返回该对象作为匹配项（尽管fields.propA不匹配）。

由于没有记录，我不确定这是预期的行为还是可能的错误。不过你有办法避免这个问题，只需定义你自己的比较器：

var comparator = function(actual, expected) {
    if (actual && expected && typeof actual === 'object' && typeof expected === 'object') {
        var res = true;
        for (var key in expected) {
            if (key.charAt(0) !== '$' && hasOwnProperty.call(actual, key)) {
                res = res && comparator(actual[key], expected[key]);
            }
        }
        return res;
    }
    expected = (''+expected).toLowerCase();
    return (''+actual).toLowerCase().indexOf(expected) > -1;
};
$scope.comparator = comparator;

然后在HTML上：

ng-repeat="item in items | filter:searchText:comparator"

<强> Demo plunker

Angularjs基本过滤用作联合而不是交集

1 个答案: