智能表：通過列中的多個屬性進行搜索

Question

我在我的角度項目中實現了智能表。目前，我有一些陣容中的人。

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

或者只是修改表中的數據傳遞給它之前智能表

然後由新的過濾器'location'property st-search="location"