Question

我对ng-options有疑问。我无法通过多重选择摆脱ng-options中的空白选项。

我试过这个solutions，但这适用于单选。有多选择的解决方案。

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

Answer 1

您可以过滤排除configs数据的null，然后使用它来绑定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>

您还可以创建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>

Answer 2

纯CSS解决方案是使用:empty pseudo-class隐藏空options：

select option:empty {
  display:none;
}

:empty MDN参考：

：empty CSS伪类表示没有子节点的任何元素。子元素可以是元素节点或文本（包括空格）。注释或处理指令不会影响元素是否为空。

Answer 3

检查一下它是否可行

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

添加css

select option:empty {
  display:none;
}

或没有css 检查这个小提琴http://jsfiddle.net/ADukg/16750/

从多选择选项

3 个答案: