ng-option showing two empty options while group by empty value

Question

I have made dropdown with ng-option and added grouping. Data contains empty string for some opting on which i have added grup by. It show two empty nodes in dropdown. Need to remove those two empty nodes from dropdown

angular.module('selectExample', [])
  .controller('ExampleController', ['$scope', function($scope) {
    $scope.colors = [{
      name: 'black',
      shade: ''
    }, {
      name: 'white',
      shade: 'light',
      notAnOption: true
    }, {
      name: 'red',
      shade: 'dark'
    }, {
      name: 'blue',
      shade: 'dark',
      notAnOption: true
    }, {
      name: 'yellow',
      shade: 'light',
      notAnOption: false
    }];
    $scope.myColor = $scope.colors[2]; // red
  }]);

Html:

<select ng-model="myColor" ng-options="color.name group by color.shade for color in colors">
  </select>

Plunker link

Of course there is empty option, because you have `shade: ''`. — dfsq, Jul 19 '16 at 12:38
you can't have a blank `optgroup`. it is creating an optgroup row for the `''` shade, then creating a second optgroup for `black`, because the `''` optgroup doesn't have a value and therefore can't be tracked. — Claies, Jul 19 '16 at 12:38
Need to remove those two empty option values from the dropdown without adding any other optgroup. — Gagan, Jul 19 '16 at 12:38
is it possible to remove those two fields or i need to make change in my JSON? — Gagan, Jul 19 '16 at 12:39
@Gagan - you can remove the unwanted items by creating/applying a custom filter to your ng-options. — jbrown, Jul 19 '16 at 12:58

score 1 · Answer 1 · answered Jul 19 '16 at 13:35

1

You can simply remove those empties shades of colors.

Just include this in your controller:

$scope.colors = $scope.colors.map(function(value) {
  if (value.shade == '') {
    value.shade = undefined;
  }
  return value;
});

answered Jul 19 '16 at 13:35

developer033

24,267
8
82
108

ng-option showing two empty options while group by empty value

1 Answers1