I want to be able to pull out the best value from a filtered list of results, this is my test page:
http://plnkr.co/edit/MCLTKUGpIyuYYjv7DLFM?p=preview
Template
<div ng-controller="repeatController">
<input type="search" ng-model="q" placeholder="filter results..." />
<ul>
<li ng-repeat="friend in friends | filter:q as results">
[{{$index + 1}}] {{friend.names[0]}}
</li>
<li ng-if="results.length == 0">
<strong>No results found...</strong>
</li>
</ul>
</div>
Controller
var app = angular.module('app', []);
app.controller('repeatController', function($scope) {
$scope.friends = [
{names:['David King', 'Davey', 'oodavid', 'Queenie']},
{names:['Paul King', 'Pablo', 'The Iron Paul']},
{names:['Michael P O\'Keefe', 'Miguel Vennie']},
{names:['James Griffiths', 'The Kraken', 'Thee Krakken']},
{names:['Queen Elizabeth', 'The Queen']}
];
});
When I type "the" into the search box I see that these people have "the" in one of their names (which is the correct list)...
...however, I want to pluck out the best match from the names array instead of just using the first value, so it should render like this:
Any pointers?
From your code I understood that you want to display only first value while displaying but while searching you want to display the subsets instead of first value. It can be achieved by following changes:
<ul>
<!-- Filter the subset containing search text -->
<span ng-repeat="friend in friends| filter:q as results">
<!-- Filter again in subset to obtain the actual value -->
<li ng-if="(!q && $first) || (q)" ng-repeat="name in friend.names| filter:q as results">
<span>{{name}}</span>
</li>
</span>
<span ng-if="results.length == 0">
<strong>No results found...</strong>
</span>
</ul>
Make use of condition (!q && $first) || (q) to display first value when there is no search text and display all when there is search text.