Angular JS：＆＃34;全选＆＃34;选项＆＃34;多选选择框＆＃34;

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：为什么我没有得到默认选项＆＃34;选择全部＆＃34;在列表中？我怎么做到的？

问题2：如何点击＆＃34;第一选项：全选＆＃34; ??

选择所有选项

请建议！

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