如何从自动选择所有选项的 ng-options 下拉菜单中创建“全选”选项？答案

【问题标题】：How do I create a "select all" option from an ng-options dropdown that automatically selects all of the options?如何从自动选择所有选项的 ng-options 下拉菜单中创建“全选”选项？
【发布时间】：2019-05-25 18:00:00
【问题描述】：

我想用一个选项填充我的ng-options下拉目，选择在选中时，将在下拉列表中选择所有可能的选项。部分问题是在这种特定情况下，我没有如何以编程方式选择从现有 JSON 对象填充的选项。如何创建一个迭代当前对象的函数，然后将它们插入到一个函数中，该函数在选择此特定对象时以编程方式选择它们？

代码

以下是填充下拉列表的示例 JSON 对象：

accounts = [
{
   "Id": 2,
   "DisplayName": "Bob",
},
{
   "Id": 2,
   "DisplayName": "George",
},
{
   "Id": 2,
   "DisplayName": "Michael",
},
]

这是我的 HTML 下拉代码：

 <div class="form-group">  
    <label for="audience" class="col-sm-2 control-label">Audience</label>  
    <div class="col-sm-8">      
       <select id="audience" ng-model="newAnnouncement.audience"
               ng-options="accountsData.DisplayName as accountsData.DisplayName for accountsData in accounts"
               multiple >
          <option value="">All</option>
       </select>
    </div>
       <div class="col-sm-2 space">      
    </div>
 </div>

在我的 component.js 文件中：

(function () {
'use strict';
angular.module('adminPanel')
    .component('adminAnnouncements', {
        templateUrl: 'app/admin-panel/admin-announcements/admin-announcements.html',
        controller: [
            '$scope', 'arcService',
            function adminAnnouncementsController($scope, arcService) {
                var my = this;
                $scope.accounts = [];

                my.$onInit = () => {
                    $scope.loadAccounts();
                }

                $scope.newAnnouncement = {
                };
            }
        ]
    }
);}
)();

试验与思考

我已经研究过尝试克隆 JSON 对象，然后将其设置为

<option value="">All</option>.

所以当全部被选中时，它会突出显示所有选项。但是在环顾四周后，我意识到您不能完全克隆 JSON 对象。我的另一个想法是使用 javascript .push() 函数手动填充所有帐户对象的所有对象，但我希望这个函数是动态的，所以当创建一个新的帐户对象时，我不需要回来并手动将accounts对象添加到all对象中。

【问题讨论】：

如果你想让 Angular 2+ 的迁移路径更容易，请避免在组件中注入 $scope 并为模型使用$ctrl。
如何使用单击该选项项来处理控制器内部的逻辑。在控制器点击逻辑中，您可以检查是否选择了 All 选项，然后相应地设置所有元素的 selected 属性。在这里检查类似的问题。 stackoverflow.com/questions/27451954/…
@georgeawg 是的！我刚刚在之前的一篇文章中了解到这一点。我看到您将我的问题标记为重复。我查看了您引用的问题，它没有使用选择输入。那么你是说没有办法在选择输入中完成“全选”功能吗？而不是只使用复选框？另一个问题是该示例使用在组件中创建的对象，但我的对象是预先创建的并从数据库中提取出来，所以我不确定如何将“selected=true/false”键/值对添加到我的对象，以便使该示例正常工作。再次感谢！

标签： javascript angularjs json ng-options

【解决方案1】：

在选项上添加点击处理程序：

<option value="" ng-click="$ctrl.all($event)">All</option>

选择所有选项：

this.all = function(ev) {
    this.audience = this.accounts.reduce((a,i)=>(a.push(i.DisplayName),a),[]);
};

The DEMO

angular.module("app",[])
.controller("ctrl",function() {
  this.audience = [];
  this.accounts = [
    {"Id": 2,"DisplayName": "Bob",},
    {"Id": 2,"DisplayName": "George",},
    {"Id": 2,"DisplayName": "Michael",},
  ];
  this.all = function(ev) {
    this.audience = this.accounts.reduce((a,i)=>(a.push(i.DisplayName),a),[]);
  };
})

<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app="app" ng-controller="ctrl as $ctrl">
    <select id="audience" ng-model="$ctrl.audience"
            ng-options="o.DisplayName as o.DisplayName for o in $ctrl.accounts"
            multiple >
      <option value="" ng-click="$ctrl.all($event)">All</option>
    </select>
    <br>{{$ctrl.audience}}
</body>

【讨论】：

就是这样！非常感谢。必须调试一下才能让它为我的使用工作，但在那我学到了很多东西。感谢您的耐心和时间。干杯！
不客气。坦率地说，我认为复选框提供了更好的用户体验。 <select multiple> 很难设置样式，并且因浏览器而异。 CTRL 和 SHIFT 键的使用不直观。
复选框的问题是它们的列表会占用多少空间。此外，通过选择输入，我可以 ShiftHold + Lclick 来选择一系列选项，而不是单独单击每个选项。我正在构建的应用程序更实用。如果您对此有异议，我总是愿意接受建议？