ng选项显示两个空选项，同时按空值分组

Question

我用ng选项进行了下拉，并添加了分组。数据包含一些选择的空字符串，我在其中添加了grup。它在下拉列表中显示两个空节点。需要从下拉中删除这两个空节点

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链接

Answer 1

您可以简单地移除那些空色调。

只需将其包含在您的控制器中：

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