angularjs - ng-option 在按空值分组时显示两个空选项

Question

我已经使用 ng-option 进行了下拉并添加了分组。数据包含一些我添加了 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;
});