How to select the first selection option after filtering in Angular

Question

I have a select with a filter. After filtering, Angular loses the selected item from the list and adds the first empty option element. What needs to be done to choose the first available option instead? Here is the markup:

 %select{'ng-model' => 'search.device_type_id', 'ng-options' => 'type.id as type.product_name for type in device_types'} %select{'ng-model' => 'device', 'ng-options' => 'device.serial_number for device in devices | filter:search'} 

Answer 1

change

 %select{'ng-model' => 'device', 'ng-options' => 'device.serial_number for device in devices | filter:search'} 

to

 %select{'ng-model' => 'device', 'ng-options' => 'device.serial_number for device in filtered_devices=(devices | filter:search)'} 

and you will have filter_devices in your area to do what you want in particular, you can view it and install the selected device when it changes

 $scope.$watch('filtered_devices', function(value){ if (filtered_devices) { $scope.device = filtered_devices[0]; } }, true); 

therefore you do not need to filter again ...

UPDATE:

After working with the model, I suggested that I found it probably a bad idea to have a filter expression as the source for ng-options. I guess the reason is that every time a filter is evaluated, it returns a new collection, and therefore the diget loop concludes that it is dirty and needs to be rewritten or something else.

Now I use a different template in which I have a filtered_items collection in my $scope , and I update it with "ng-change" in the filter input. therefore the filtered_items to which ng-options are bound does not change if it really needs to be changed ...

Answer 2

I was not able to set the default value after filtering using directives, just like with $ watch in the controller, for example:

 # View.haml -# select itself %select{'ng-model' => 'search.brand_id', 'ng-options' => 'brand.id as brand.name for brand in brands'} %select{'ng-model' => 'search.device_type_id', 'ng-options' => 'type.id as type.product_name for type in device_types | filter:search.brand_id'} %select{'ng-model' => 'device', 'ng-required' => 'true', 'ng-options' => 'device.serial_number for device in devices | filter:search'} -# selected device %input{'ng-model' => 'selectedDevice.id', type: 'text', disabled: true, placeholder: 'Select a device!'} 

-

 #Controller.js $scope.$watch('search.device_type_id', function(value){ var filtered_devices = $filter('filter')($scope.devices, $scope.search); if (filtered_devices) { $scope.device = filtered_devices[0]; } }, true); 

Answer 3

another solution that does not use $watch but uses ng-change

also added debounce so that it only ng-change after 1000 milliseconds

View

%select{'ng-model' => 'device', 'ng-options' => 'device.serial_number for device in filtered_devices=(devices | filter:search)', 'ng-change' => 'updateDevices()', 'ng-model-options' => '{ debounce: 1000 }'}

controller

 $scope.filtered_devices = []; $scope.updateDevices = function () { if ($scope.filtered_devices.length === 0) return; $scope.device = $scope.filtered_devices[0]; };