angular:angularjs:storonnie_moduli:ui.select2:multiple

Содержание

Multiple Selection

Multiple Selection

Массив строк

Самый простой вариант , сформировать Multiple Selection , для связки с ngModel, нужно использовать аналогичный по структуре массив.

список - vm.availableColors = ['Red','Green','Blue','Yellow','Magenta','Maroon','Umbra','Turquoise'];
предопределенный список - vm.multipleDemo.colors = ['Blue','Red'];

Контроллер с данными для вывода свойств select

app.controller('DemoCtrl', function ($scope, $http, $timeout, $interval) {
var vm = this;
vm.availableColors = ['Red','Green','Blue','Yellow','Magenta','Maroon','Umbra','Turquoise'];
vm.multipleDemo.colors = ['Blue','Red'];
 
});

шаблон

  <h3>Array of strings</h3>
  <ui-select multiple ng-model="ctrl.multipleDemo.colors" theme="bootstrap" ng-disabled="ctrl.disabled" close-on-select="false" style="width: 300px;" title="Choose a color">
    <ui-select-match placeholder="Select colors...">{{$item}}</ui-select-match>
    <ui-select-choices repeat="color in ctrl.availableColors | filter:$select.search">
      {{color}}
    </ui-select-choices>
  </ui-select>
  <p>Selected: {{ctrl.multipleDemo.colors}}</p>

Массив объектов

Связка с ngModel происходит с аналогичным по структуре объектом

список - vm.people;
предопределенный список - vm.multipleDemo.selectedPeople;

app.controller('DemoCtrl', function ($scope, $http, $timeout, $interval) {
var vm = this;
 
 vm.people = [
    { name: 'Adam',      email: 'adam@email.com',      age: 12, country: 'United States' },
    { name: 'Amalie',    email: 'amalie@email.com',    age: 12, country: 'Argentina' },
    { name: 'Estefanía', email: 'estefania@email.com', age: 21, country: 'Argentina' },
    { name: 'Adrian',    email: 'adrian@email.com',    age: 21, country: 'Ecuador' },
    { name: 'Wladimir',  email: 'wladimir@email.com',  age: 30, country: 'Ecuador' },
    { name: 'Samantha',  email: 'samantha@email.com',  age: 30, country: 'United States' },
    { name: 'Nicole',    email: 'nicole@email.com',    age: 43, country: 'Colombia' },
    { name: 'Natasha',   email: 'natasha@email.com',   age: 54, country: 'Ecuador' },
    { name: 'Michael',   email: 'michael@email.com',   age: 15, country: 'Colombia' },
    { name: 'Nicolás',   email: 'nicolas@email.com',    age: 43, country: 'Colombia' }
  ];
 
  vm.multipleDemo.selectedPeople = [    
    { name: 'Wladimir',  email: 'wladimir@email.com',  age: 30, country: 'Ecuador' },
    { name: 'Samantha',  email: 'samantha@email.com',  age: 30, country: 'United States' }
  ];
 
});

Если объект совпадает с каким то объектом из списка он будет добавлен в вывод select

  <ui-select multiple ng-model="ctrl.multipleDemo.selectedPeople" theme="bootstrap" ng-disabled="ctrl.disabled" sortable="true" close-on-select="false" style="width: 800px;">
    <ui-select-match placeholder="Select person...">{{$item.name}} &lt;{{$item.email}}&gt;</ui-select-match>
    <ui-select-choices repeat="person in ctrl.people | propsFilter: {name: $select.search, age: $select.search}">
      <div ng-bind-html="person.name | highlight: $select.search"></div>
      <small>
        email: {{person.email}}
        age: <span ng-bind-html="''+person.age | highlight: $select.search"></span>
      </small>
    </ui-select-choices>
  </ui-select>
  <p>Selected: {{ctrl.multipleDemo.selectedPeople}}</p>

Массив объектов с привязкой к одному свойству

Контроллер с данными для вывода свойств селекта

vm.people - список пользователей
vm.multipleDemo.selectedPeopleSimple - предопределенные люди

app.controller('DemoCtrl', function ($scope, $http, $timeout, $interval) {
var vm = this;
 
 vm.people = [
    { name: 'Adam',      email: 'adam@email.com',      age: 12, country: 'United States' },
    { name: 'Amalie',    email: 'amalie@email.com',    age: 12, country: 'Argentina' },
    { name: 'Estefanía', email: 'estefania@email.com', age: 21, country: 'Argentina' },
    { name: 'Adrian',    email: 'adrian@email.com',    age: 21, country: 'Ecuador' },
    { name: 'Wladimir',  email: 'wladimir@email.com',  age: 30, country: 'Ecuador' },
    { name: 'Samantha',  email: 'samantha@email.com',  age: 30, country: 'United States' },
    { name: 'Nicole',    email: 'nicole@email.com',    age: 43, country: 'Colombia' },
    { name: 'Natasha',   email: 'natasha@email.com',   age: 54, country: 'Ecuador' },
    { name: 'Michael',   email: 'michael@email.com',   age: 15, country: 'Colombia' },
    { name: 'Nicolás',   email: 'nicolas@email.com',    age: 43, country: 'Colombia' }
  ];
 
  vm.multipleDemo.selectedPeopleSimple = ['samantha@email.com','wladimir@email.com'];
 
});

В шаблоне указываем что связывать NgModel будем по значению поля person.email

repeat="person.email as person in ctrl.people | propsFilter: {name: $select.search, age: $select.search}"

весь шаблон

  <ui-select multiple ng-model="ctrl.multipleDemo.selectedPeopleSimple" theme="bootstrap" ng-disabled="ctrl.disabled" close-on-select="false" style="width: 800px;" title="Choose a person">
    <ui-select-match placeholder="Select person...">{{$item.name}} &lt;{{$item.email}}&gt;</ui-select-match>
    <ui-select-choices repeat="person.email as person in ctrl.people | propsFilter: {name: $select.search, age: $select.search}">
      <div ng-bind-html="person.name | highlight: $select.search"></div>
      <small>
        email: {{person.email}}
        age: <span ng-bind-html="''+person.age | highlight: $select.search"></span>
      </small>
    </ui-select-choices>
  </ui-select>
  <p>Selected: {{ctrl.multipleDemo.selectedPeopleSimple}}</p>

Ставить удаленные элементы списка в desabled , если этот элемент был удален из списка

vm.people - список пользователей
vm.multipleDemo.removeSelectIsFalse - предопределенные люди

app.controller('DemoCtrl', function ($scope, $http, $timeout, $interval) {
var vm = this;
 
 vm.people = [
    { name: 'Adam',      email: 'adam@email.com',      age: 12, country: 'United States' },
    { name: 'Amalie',    email: 'amalie@email.com',    age: 12, country: 'Argentina' },
    { name: 'Estefanía', email: 'estefania@email.com', age: 21, country: 'Argentina' },
    { name: 'Adrian',    email: 'adrian@email.com',    age: 21, country: 'Ecuador' },
    { name: 'Wladimir',  email: 'wladimir@email.com',  age: 30, country: 'Ecuador' },
    { name: 'Samantha',  email: 'samantha@email.com',  age: 30, country: 'United States' },
    { name: 'Nicole',    email: 'nicole@email.com',    age: 43, country: 'Colombia' },
    { name: 'Natasha',   email: 'natasha@email.com',   age: 54, country: 'Ecuador' },
    { name: 'Michael',   email: 'michael@email.com',   age: 15, country: 'Colombia' },
    { name: 'Nicolás',   email: 'nicolas@email.com',    age: 43, country: 'Colombia' }
  ];
 
  vm.multipleDemo.removeSelectIsFalse = [vm.people[2], vm.people[0]];
 
});

чтобы нельзя было повторно выбрать пользователя необходимо добавить параметр в шаблон select2, remove-selected, по умолчанию этот параметр всегда стоит в true,
поэтому чтобы запретить повторный выбор из списка ставим его в false

<ui-select multiple ng-model="ctrl.multipleDemo.removeSelectIsFalse"  remove-selected="false">

после этого удаленный элемент будет отображаться в выпадающем списке как неактивный элемент

  <ui-select multiple ng-model="ctrl.multipleDemo.removeSelectIsFalse" theme="bootstrap" ng-disabled="ctrl.disabled" close-on-select="false" style="width: 800px;" title="Choose a person" remove-selected="false">
    <ui-select-match placeholder="Select person...">{{$item.name}} &lt;{{$item.email}}&gt;</ui-select-match>
    <ui-select-choices repeat="person in ctrl.people | propsFilter: {name: $select.search, age: $select.search}">
      <div ng-bind-html="person.name | highlight: $select.search"></div>
      <small>
        email: {{person.email}}
        age: <span ng-bind-html="''+person.age | highlight: $select.search"></span>
      </small>
    </ui-select-choices>
  </ui-select>
  <p>Selected: {{ctrl.multipleDemo.removeSelectIsFalse}}</p>

удаляем элемент {«name»:«Adam»,«email»:«adam@email.com»,«age»:12,«country»:«United States»}

наш выпадающий список

Группировка выпадающего списка

vm.people - список пользователей
vm.multipleDemo.selectedPeopleWithGroupBy - предопределенные люди\
vm.someGroupFn = метод группировки списка

app.controller('DemoCtrl', function ($scope, $http, $timeout, $interval) {
var vm = this;
 
 vm.people = [
    { name: 'Adam',      email: 'adam@email.com',      age: 12, country: 'United States' },
    { name: 'Amalie',    email: 'amalie@email.com',    age: 12, country: 'Argentina' },
    { name: 'Estefanía', email: 'estefania@email.com', age: 21, country: 'Argentina' },
    { name: 'Adrian',    email: 'adrian@email.com',    age: 21, country: 'Ecuador' },
    { name: 'Wladimir',  email: 'wladimir@email.com',  age: 30, country: 'Ecuador' },
    { name: 'Samantha',  email: 'samantha@email.com',  age: 30, country: 'United States' },
    { name: 'Nicole',    email: 'nicole@email.com',    age: 43, country: 'Colombia' },
    { name: 'Natasha',   email: 'natasha@email.com',   age: 54, country: 'Ecuador' },
    { name: 'Michael',   email: 'michael@email.com',   age: 15, country: 'Colombia' },
    { name: 'Nicolás',   email: 'nicolas@email.com',    age: 43, country: 'Colombia' }
  ];
 
  vm.multipleDemo.selectedPeopleWithGroupBy = [vm.people[8], vm.people[6]];
 
 
  vm.someGroupFn = function (item){
 
    if (item.name[0] >= 'A' && item.name[0] <= 'M')
        return 'From A - M';
 
    if (item.name[0] >= 'N' && item.name[0] <= 'Z')
        return 'From N - Z';
 
  };
 
});

Для того чтобы группировка заработала необходимо в атрибут group-by добавить callback, в нашем случае это метод someGroupFn

 <ui-select-choices group-by="ctrl.someGroupFn" repeat="person in ctrl.people">

После этого список будет сгруппирован по буквам алфавита

'From A - M' - первая группа
'From N - Z' - вторая группа

  <ui-select multiple ng-model="ctrl.multipleDemo.selectedPeopleWithGroupBy" theme="bootstrap" ng-disabled="ctrl.disabled" close-on-select="false" style="width: 800px;" title="Choose a person">
    <ui-select-match placeholder="Select person...">{{$item.name}} &lt;{{$item.email}}&gt;</ui-select-match>
    <ui-select-choices group-by="ctrl.someGroupFn" repeat="person in ctrl.people | propsFilter: {name: $select.search, age: $select.search}">
      <div ng-bind-html="person.name | highlight: $select.search"></div>
      <small>
        email: {{person.email}}
        age: <span ng-bind-html="''+person.age | highlight: $select.search"></span>
      </small>
    </ui-select-choices>
  </ui-select>
  <p>Selected: {{ctrl.multipleDemo.selectedPeopleWithGroupBy}}</p>