angular:angularjs:storonnie_moduli:ui.select2:multiple_selection []

Эта страница только для чтения. Вы можете посмотреть её исходный текст, но не можете его изменить. Сообщите администратору, если считаете, что это неправильно.
===== Multiple Selection =====

====Массив строк====

Самый простой вариант , сформировать Multiple Selection , для связки с ngModel, нужно использовать аналогичный по структуре массив.
  * список - vm.availableColors = ['Red','Green','Blue','Yellow','Magenta','Maroon','Umbra','Turquoise'];
  * предопределенный список - vm.multipleDemo.colors = ['Blue','Red'];

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

<code javascript>
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'];

});
</code>

шаблон

<code javascript>
  <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>
</code>

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

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

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

<code javascript>
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' }
  ];

});
</code>

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

<code javascript>
  <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>
</code>

{{ :angular:angularjs:сторонние_модули:ui.select2:screen2.png |}}
----
====Массив объектов с привязкой к одному свойству====

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

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

<code javascript>
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'];

});
</code>


В шаблоне указываем что связывать NgModel будем по значению поля person.email
<code javascript>
repeat="person.email as person in ctrl.people | propsFilter: {name: $select.search, age: $select.search}"
</code>

весь шаблон
<code javascript>
  <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>
</code>



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

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


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


<code javascript>
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]];

});
</code>

чтобы нельзя было повторно выбрать пользователя необходимо добавить параметр в шаблон select2, **remove-selected**, по умолчанию этот параметр всегда стоит в true, \\
поэтому чтобы запретить повторный выбор из списка ставим его в false
<code javascript>
<ui-select multiple ng-model="ctrl.multipleDemo.removeSelectIsFalse"  remove-selected="false">
</code>

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

<code javascript>
  <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>
</code>
удаляем элемент {"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** = метод группировки списка


<code javascript>
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';

  };

});
</code>

Для того чтобы группировка заработала необходимо в атрибут **group-by** добавить callback, в нашем случае это метод **someGroupFn**
<code javascript>
 <ui-select-choices group-by="ctrl.someGroupFn" repeat="person in ctrl.people">
</code>

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

<code javascript>
  <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>
</code> 


{{ :angular:angularjs:сторонние_модули:ui.select2:screen5.png |}}
Инструменты пользователя

Инструменты сайта

Инструменты страницы
