I am facing a challenge with filtering a list of people based on their first and last name properties using Angular's filter functionality. The issue is that the filter only considers one property at a time, so users cannot search for both first and last names simultaneously. Is there a way to create 'virtual' properties that combine two existing properties for search purposes?
If my explanation was confusing, as it usually is, you can test it by searching for 'Steve Jobs' in the code snippet provided:
var app = angular.module('app', []);
app.controller('myCtrl', function($scope) {
$scope.people = [
{first: 'John', last: 'Smith'},
{first: 'Jane', last: 'Doe'},
{first: 'Bill', last: 'Gates'},
{first: 'John', last: 'Krasinski'},
{first: 'Ada', last: 'Lovelace'},
{first: 'Brad', last: 'Pitt'},
{first: 'Steve', last: 'Jobs'},
{first: 'Bill', last: 'Clinton'},
{first: 'Britishname', last: 'Complicated'},
{first: 'Steve', last: 'Wozniak'}
];
});<div ng-app="app" ng-controller="myCtrl">
<input type="text" ng-model="search" placeholder="Search...">
<ul>
<li ng-repeat="person in people | filter: search">
{{person.first}} {{person.last}}
</li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>