===== 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'];

});

шаблон


  Array of strings
  
    {{$item}}
    
      {{color}}
    
  
  Selected: {{ctrl.multipleDemo.colors}}

{{ :angular:angularjs:сторонние_модули:ui.select2:screenshot_1.png }} ---- ====Массив объектов==== Связка с 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


  
    {{$item.name}} <{{$item.email}}>
    
      
      
        email: {{person.email}}
        age: 
      
    
  
  Selected: {{ctrl.multipleDemo.selectedPeople}}

{{ :angular:angularjs:сторонние_модули:ui.select2:screen2.png |}} ---- ====Массив объектов с привязкой к одному свойству==== Контроллер с данными для вывода свойств селекта * **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}"

весь шаблон


  
    {{$item.name}} <{{$item.email}}>
    
      
      
        email: {{person.email}}
        age: 
      
    
  
  Selected: {{ctrl.multipleDemo.selectedPeopleSimple}}

{{ :angular:angularjs:сторонние_модули:ui.select2:screen1.png |}} ---- ====Ставить удаленные элементы списка в 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

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


  
    {{$item.name}} <{{$item.email}}>
    
      
      
        email: {{person.email}}
        age: 
      
    
  
  Selected: {{ctrl.multipleDemo.removeSelectIsFalse}}

удаляем элемент {"name":"Adam","email":"adam@email.com","age":12,"country":"United States"} {{ :angular:angularjs:сторонние_модули:ui.select2:screen3.png |}}\\ \\ наш выпадающий список {{ :angular:angularjs:сторонние_модули:ui.select2:screen4.png |}} ---- ====Группировка выпадающего списка==== * **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**

После этого список будет сгруппирован по буквам алфавита * 'From A - M' - первая группа * 'From N - Z' - вторая группа


  
    {{$item.name}} <{{$item.email}}>
    
      
      
        email: {{person.email}}
        age: 
      
    
  
  Selected: {{ctrl.multipleDemo.selectedPeopleWithGroupBy}}

{{ :angular:angularjs:сторонние_модули:ui.select2:screen5.png |}}