javascript - Angular JS : "Select All" options of "multi-select select box"

Question

我使用 Angular JS 创建了一个多选选择框:下面是相同的代码:

JS:

$scope.foobars = [{
    'foobar_id': 'foobar01',
    'name': 'foobar01',
}, {
    'foobar_id': 'foobar02',
    'name': 'foobar02',
}, {
    'foobar_id': 'foobar03',
    'name': 'foobar03',
}, {
    'foobar_id': 'foobar04',
    'name': 'foobar04',
}, {
    'foobar_id': 'foobar05',
    'name': 'foobar05',
}];

HTML:

<select multiple="multiple" size="5" id="selFooBar" ng-model="foobarName" ng-options="medcenter as medcenter.name for medcenter in medcenters track by medcenter.medcenter_id">
    <option selected="selected">Select All</option>
</select>

输出是:

问题 1:为什么我在列表中没有看到默认选项“全选”？我怎样才能得到它？

问题2:如何在点击“第一个选项:全选”时选择所有选项？

请推荐!

Answer 1

如果您想保留<option>在 <select>添加 ng-options 之前的元素你必须使用嵌入。 ng-options指令不使用嵌入，但您可以创建一个使用嵌入的自定义指令。您可以使用 transcludeFn 来做到这一点在指令后编译函数中:

compile: function(element,attrs) {
  return {
    post: function(scope, element, attributes, controller, transcludeFn){
      transcludeFn(function(clone, scope) {
        // prepend the transcluded content to the select
        element.prepend(clone);
        // set the onclick of the clone to call the selectAll function
        clone.bind('click', function(){
          clone.scope().$parent.selectAll();
          scope.$apply();
        })
      });
    }
  }
},
controller: function($scope) {
  $scope.selectAll = function() {
    $scope.selectedValues = $scope.values;
  }
}

然后你可以设置selectedValues一切可能values范围，无论是隔离的还是继承的。在下面的 plnkr 示例中，它是孤立的。单击“全选”选项将选择其他元素。 Plunker Example