Remove blank values from multi select ng-options

Question

I have a problem with ng-options. I can't get rid of the blank option in my ng-options with multi select.

I tried this solutions but this works for single select. Is there any solution for multi select.

HTML

 <select ng-model="feed.config" ng-options="item.name for item in configs" multiple> <!-- <option value="" ng-if="false"></option> works only for single select --> </select>

JS

$scope.feed = {}; $scope.configs = [{'name': null,'value': 'config1'}, {'name': 'Config 2', 'value': 'config2'}, {'name': 'Config 3','value': 'config3'} ];

Fiddle

cнŝdk · Accepted Answer · 2017-12-11 12:29:01Z

A pure CSS solution is to use :empty pseudo-class to hide the empty options:

select option:empty { display:none; }

:empty MDN reference:

The :empty CSS pseudo-class represents any element that has no children. Children can be either element nodes or text (including whitespace). Comments or processing instructions do not affect whether an element is considered empty or not.

Satpal · Accepted Answer · 2017-12-11 11:04:41Z

You can filter configs which exclude null data and then use it to bind ngOption

$scope.getConfigs = function () { return $scope.configs.filter(function (x) { return x.name != null; }) }

HTML

<select ng-model="feed.config" ng-options="item.name for item in getConfigs()" multiple> </select>

var MyApp = angular.module('MyApp1', []) MyApp.controller('MyController', function($scope) { $scope.feed = {}; $scope.configs = [{ 'name': null, 'value': 'config1' }, { 'name': 'Config 2', 'value': 'config2' }, { 'name': 'Config 3', 'value': 'config3' }]; $scope.getConfigs = function() { return $scope.configs.filter(function(x) { return x.name != null; }) } });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="MyApp1"> <div ng-controller="MyController"> <select ng-model="feed.config" ng-options="item.name for item in getConfigs()" multiple> </select> <br> {{feed.config}} </div> </div>

You can also create a filter

var MyApp = angular.module('MyApp1', []); MyApp.filter('notNull', [function() { return function(object) { var array = object.filter(function(x) { return x.name != null; }) return array; }; }]) MyApp.controller('MyController', function($scope) { $scope.feed = {}; $scope.configs = [{ 'name': null, 'value': 'config1' }, { 'name': 'Config 2', 'value': 'config2' }, { 'name': 'Config 3', 'value': 'config3' }]; });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="MyApp1"> <div ng-controller="MyController"> <select ng-model="feed.config" ng-options="item.name for item in configs | notNull " multiple> </select> <br> {{feed.config}} </div> </div>

Thanks for the quick response. Is there any similar solution like single select because I prefer any HTML and CSS side solution.

Vinoth · Accepted Answer · 2017-12-11 11:14:01Z

check this it will work

 <select id="feed" ng-model="feed.config" > <option ng-repeat="config in configs " value="{{config.name}} || Null" ng-bind="config.name"></option> </select>

add css

select option:empty { display:none; }

or without css check this fiddle http://jsfiddle.net/ADukg/16750/

Collectives™ on Stack Overflow

Remove blank values from multi select ng-options

3 Answers 3

1 Comment

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Linked

Related