Remove blank option ng-repeat and ng-options after filter

Question

There are several questions very similar to this one yet I have been unable to come up with a solution.

I have a select list using angularJS. I need to use the title attribute so I have an ng-repeat to create the options, there is always a blank option even if I use ng-selected to always select the first option.

Even if I make a selection and the blank option goes away, if I then filter out that selected value the blank will reappear.

I have included a select list using ng-option (which does not include my needed tittle attribute) and a default value to show that the blank will appear after filter.

The behavior I desire would be to never have a blank option (always selecting first option would be fine) and to possibly have a directive per option for special handling of click events.

Thanks in Advance!

JS Fiddle: http://jsfiddle.net/32DFM/3/

                    <select size="3" ng-model="person.current">
                <option  ng-repeat="p in people | filter:person.SearchTerm"
                        ng-selected="$first"
                        value="{{p}}"
                        title="{{p.name}}">
                    {{p.name}}
                </option>
    </select>

Answer 1

I forked your fiddle (if I may be so blunt): http://jsfiddle.net/XsFe8/2/

This fixes it somewhat. Although I haven't gotten it to work properly together with the filter.

Anyway, what I do here, is to use the person.id as the value on each option.

<select ng-model="person.current">
    <option ng-repeat="p in people | filter:person.SearchTerm" ng-selected="$first" value="{{p.id}}" title="{{p.name}}">
        {{p.name}}
    </option>
</select>

And set the initial calue on the person.current model:

$scope.person.current = $scope.people[1].id;

But it's still not 100% though. I'm a bit stumped to why the blank spaces appear when you filter the select....

An alternative that might or might not work, would be to use something like ng-repeat="p in filterPeople() and filter your array in a filterPeople function. But I'm not sure if this will change anything.

UPDATE : I tested out my suggestion above, here: http://jsfiddle.net/XsFe8/2/ If you set the selected object to be the first object in the filtered array, it works. I do this each time a new filtered array is created:

$scope.filterPeople = function () {
    var array = filterFilter($scope.people, $scope.person.SearchTerm);
    $scope.person.current = array[0].id;
    return array;
};

It looks like things get hairy when another object than what is visible in the select is actually selected. This is kind of understandable :)

Answer 2

Your actual problem is the value in ngModel is referencing a value which doesn't exist in the select anymore.

A solution is to whenever you alter the select options, you also check the person.current to ensure that it points to a valid entry.

This also implies that you might want to move your filter into the controller, and set the options in the scope (you can use the $filter service in your code to get same behaviour there, https://docs.angularjs.org/api/ng/filter/filter ). This way you can have a function in your controller checking if person.current is valid, and if not, set it to desired options (eg the first one).

Answer 3

the hairyness cited above is due to an empty array when all items are filtered out and is fixed by:

 if(array.length>0)
        $scope.person.current = array[0].id;

http://jsfiddle.net/b0z6vpr8/

Hope this helps