Smart-table:按列中的多个属性进行搜索

Question

我已经在我的angular项目中实现了一个智能表。目前，我在一个数组中有许多人。

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

我已经把它绑定到我的桌子上了。

<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(', ');

或者只是在将表数据传递给smart-table之前修改它

然后根据新的'location‘属性st-search="location"进行过滤