Angular JS：“多选选择框”的“全选”选项

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

如果要在添加ng-options之前将<option>保留在<select>元素中，则必须使用包含。 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示例中，它是隔离的。 单击时，全选选项将选择其他元素。 柱塞示例