javascript - 智能表:按列中的多个属性搜索

Question

我在我的 Angular 项目中实现了一个智能表。目前我有很多人在一个数组中。

$scope.persons = [
    {
        "firstname":"Anders",
        "lastname":"Andersson",
        "city":"Stockholm",
        "country":"Sweden"
    },
    {
        "firstname":"John",
        "lastname":"Smith",
        "city":"Washington DC",
        "country":"USA"
    }
];

我已绑定(bind)到我的表。

<table st-safe-src="persons" class="table">
    <thead>
        <tr>
            <th><input st-search="firstname" class="form-control" type="search"/></th>
            <th><input st-search="lastname" class="form-control" type="search"/></th>
            <th><input st-search="city" class="form-control" type="search"/></th>
            <th><input st-search="country" class="form-control" type="search"/></th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="person in persons">
            <td>{{person.firstname}}</td>
            <td>{{person.lastname}}</td>
            <td>{{person.city}}</td>
            <td>{{person.country}}</td>
        </tr>
    </tbody>
</table>

这工作非常顺利。在每一列的每个标题中，我都可以搜索指定的属性。但是，我想重做表格并在同一列中有两个(或者将来可能更多)属性。在我相当简单的示例中，我想将我的城市和国家/地区属性加入到下面指定的一列中。

<table st-safe-src="persons" class="table">
    <thead>
        <tr>
            <th><input st-search="firstname" class="form-control" type="search"/></th>
            <th><input st-search="lastname" class="form-control" type="search"/></th>
            <th><input st-search="???" class="form-control" type="search"/></th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="person in persons">
            <td>{{person.firstname}}</td>
            <td>{{person.lastname}}</td>
            <td>{{person.city}}, {{person.country}}</td>
        </tr>
    </tbody>
</table>

在此更改中，我想在第三列中同时搜索城市和国家/地区。我必须做什么才能实现该功能？

Answer 1

这是一个想法(我敢打赌您可以通过其他几种方式实现这种功能)。

在智能表中，您可以为您想要执行的任何操作定义数据的安全副本，而无需使用 st-safe-src 属性修改数据。在该安全集合中，将城市和国家/地区字符串连接到一个新属性中..

person.location: [person.city, person.country].join(', ');

或者在将表数据传递给智能表之前修改表数据

然后按新的“位置”属性过滤 st-search="location"