Angular JS:“全选" “多选选择框"的选项 [英] Angular JS: "Select All" options of "multi-select select box"

问题描述

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

I have created a multiselect select box using Angular JS: below is the code for the same:

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:为什么列表中没有默认选项全选"?那我该怎么办?

Question 1: Why am I not getting the default option "Select All" in the list? And How do I get that?

问题2:如何通过单击第一个选项:全选"来选择所有优化?

Question 2: How can I Select All optiions on click of "First Option : Select All"??

请提出建议！

推荐答案

如果要在添加ng-options之前将<option>保留在<select>元素中，则必须使用包含. ng-options指令不使用包含，但是您可以创建一个自定义指令.您可以通过在指令后编译功能中使用transcludeFn来做到这一点:

If you want to keep the <option> in the <select> element before you add the ng-options you'll have to use transclusion. the ng-options directive doesn't use transclusion, but you can create a custom directive that does. You can do that by utilizing transcludeFn in the directive post compile function:

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示例中，它是隔离的.单击时，全选选项将选择其他元素. 柱塞示例

Then you can set the selectedValues to all possible values on the scope, whether that's isolate or inherited. In the following plnkr example it's isolated. On click the Select All option will select the other elements. Plunker Example

这篇关于Angular JS:“全选" “多选选择框"的选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！