Angular JS："Select All" 个选项 "multi-select select box"

Question

我使用 Angular JS 创建了一个 multiselect select 框：下面是相同的代码：

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：为什么我没有在列表中获得默认选项 "Select All"？我如何获得它？

问题 2：如何 Select 单击 "First Option : Select All" 的所有选项？？

求推荐！

Answer 1

如果您想在添加 ng-options 之前将 <option> 保留在 <select> 元素中，则必须使用嵌入。 ng-options 指令不使用嵌入，但您可以创建一个自定义指令。您可以通过在指令 post 编译函数中使用 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 示例中，它是孤立的。单击 Select 所有选项将 select 其他元素。 Plunker Example

Angular JS："Select All" 个选项 "multi-select select box"

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

html

javascript

jquery

multi-select

angularjs