智能表：通过列中的多个属性进行搜索

问题描述：

我在我的角度项目中实现了智能表。目前，我有一些阵容中的人。智能表：通过列中的多个属性进行搜索

$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>

在这个变化中，我想在第三列中搜索城市和国家。我必须做些什么才能实现该功能？

答

这里有一个想法（我敢打赌你可以通过其他几种方式实现这种功能）。

在智能表中，您可以定义数据的安全副本，以便在不使用st-safe-src属性修改数据的情况下执行任何操作。是安全的集合中，加入城市和国家的字符串到一个新的属性..

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

或者只是修改表中的数据传递给它之前智能表

然后由新的过滤器'location'property st-search="location"

智能表：通过列中的多个属性进行搜索

相关推荐