I have integrated a smart table into my Angular project. Currently, I am storing a list of individuals in an array.
$scope.persons = [
{
"firstname":"Anders",
"lastname":"Andersson",
"city":"Stockholm",
"country":"Sweden"
},
{
"firstname":"John",
"lastname":"Smith",
"city":"Washington DC",
"country":"USA"
}
];
These individuals are connected to my 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="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>
This setup is functioning smoothly. However, I would like to modify the table by combining two (or potentially more) properties into one column. Specifically, I wish to merge the city and country properties together as shown below.
<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>
In making this change, I want to be able to search for both the city and country in the third column. What steps do I need to take to implement this functionality?