Как создать опцию «выбрать все» из выпадающего списка ng-options, который автоматически выбирает все опции? - PullRequest
Новая
       28

Как создать опцию «выбрать все» из выпадающего списка ng-options, который автоматически выбирает все опции?

0 голосов
/ 27 декабря 2018

Я хотел бы заполнить свой раскрывающийся список параметров ng опцией, которая при выборе выберет все возможные варианты в раскрывающемся списке.Частично проблема заключается в том, что я не делаю, как программно выбирать параметры, которые заполняются, из существующего объекта 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 (), но я хочу, чтобы эта функция была динамичной, поэтому при создании нового объекта учетных записей мне не нужно возвращатьсяи вручную добавьте объект учетных записей ко всему объекту.

1 Ответ

0 голосов
/ 28 декабря 2018

Добавьте обработчик кликов для опции: 

<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),[]);
};

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>
...