Multiple

examples/demo.html

@@ -62,8 +62,7 @@
   <button class="btn btn-default btn-xs" ng-click="disable()">Disable ui-select</button>
   <button class="btn btn-default btn-xs" ng-click="clear()">Clear ng-model</button>
 
-  <h3>Bootstrap theme</h3>
-  <p>Selected: {{address.selected.formatted_address}}</p>
+  <h1>Bootstrap theme</h1>
   <ui-select ng-model="address.selected"
              theme="bootstrap"
              ng-disabled="disabled"
@@ -76,9 +75,21 @@ <h3>Bootstrap theme</h3>
       <div ng-bind-html="address.formatted_address | highlight: $select.search"></div>
     </ui-select-choices>
   </ui-select>
+  <p>Selected: {{address.selected.formatted_address}}</p>
 
-  <h3>Select2 theme</h3>
-  <p>Selected: {{person.selected}}</p>
+  <h3>Multi select</h3>
+  <ui-select multiple ng-model="friends" theme="bootstrap" ng-disabled="disabled" style="width: 300px;">
+    <ui-select-match placeholder="Search and select friends...">{{$item.name}}</ui-select-match>
+    <ui-select-choices repeat="person in people | propsFilter: {name: $select.search, age: $select.search}">
+      <div ng-bind-html="person.name | highlight: $select.search"></div>
+      <small>
+        age: <span ng-bind-html="''+person.age | highlight: $select.search"></span>
+      </small>
+    </ui-select-choices>
+  </ui-select>
+  <p>Selected: {{friends|json}}</p>
+
+  <h1>Select2 theme</h1>
   <ui-select ng-model="person.selected" theme="select2" ng-disabled="disabled" style="min-width: 300px;">
     <ui-select-match placeholder="Select a person in the list or search his name/age...">{{$select.selected.name}}</ui-select-match>
     <ui-select-choices repeat="person in people | propsFilter: {name: $select.search, age: $select.search}">
@@ -89,15 +100,27 @@ <h3>Select2 theme</h3>
       </small>
     </ui-select-choices>
   </ui-select>
+  <p>Selected: {{person.selected}}</p>
 
-  <h3>Selectize theme</h3>
-  <p>Selected: {{country.selected}}</p>
+  <h3>Multi select</h3>
+  <ui-select multiple ng-model="colors" theme="select2" ng-disabled="disabled" style="width: 300px;">
+    <ui-select-match placeholder="Select colors...">{{$item}}</ui-select-match>
+    <ui-select-choices repeat="color in availableColors | filter:$select.search">
+      {{color}}
+    </ui-select-choices>
+  </ui-select>
+  <p>Selected: {{colors}}</p>
+
+  <h1>Selectize theme</h1>
   <ui-select ng-model="country.selected" theme="selectize" ng-disabled="disabled" style="width: 300px;">
     <ui-select-match placeholder="Select or search a country in the list...">{{$select.selected.name}}</ui-select-match>
     <ui-select-choices repeat="country in countries | filter: $select.search">
       <span ng-bind-html="country.name | highlight: $select.search"></span>
       <small ng-bind-html="country.code | highlight: $select.search"></small>
     </ui-select-choices>
   </ui-select>
+  <p>Selected: {{country.selected}}</p>
+
+
 </body>
 </html>

examples/demo.js

@@ -54,9 +54,15 @@ app.controller('DemoCtrl', function($scope, $http) {
     $scope.person.selected = undefined;
     $scope.address.selected = undefined;
     $scope.country.selected = undefined;
+    $scope.friends = [];
+    $scope.colors = [];
   };
 
-  $scope.person = {};
+  $scope.availableColors = ['Red','Green','Blue','Yellow','Magenta','Maroon','Umbra','Turquoise'];
+  $scope.colors = ['Blue','Red'];
+  $scope.friends = [{ name: 'Samantha',  email: '[email protected]',  age: 31 }];
+
+  $scope.person = {selected:{ name: 'Nicole',    email: '[email protected]',    age: 43 }};
   $scope.people = [
     { name: 'Adam',      email: '[email protected]',      age: 10 },
     { name: 'Amalie',    email: '[email protected]',    age: 12 },
@@ -79,7 +85,7 @@ app.controller('DemoCtrl', function($scope, $http) {
     });
   };
 
-  $scope.country = {};
+  $scope.country = {name: 'Afghanistan', code: 'AF'};
   $scope.countries = [ // Taken from https://gist.github.com/unceus/6501985
     {name: 'Afghanistan', code: 'AF'},
     {name: 'Åland Islands', code: 'AX'},

src/bootstrap/match-multiple.tpl.html

@@ -0,0 +1,13 @@
+<span class="ui-select-match">
+  <span ng-repeat="$item in $select.selected">
+    <button 
+      class="btn btn-default btn-xs" 
+      tabindex="-1" 
+      ng-disabled="$select.disabled"
+      ng-click="$select.activeMatchIndex = $index;"
+      ng-class="{'btn-primary':$select.activeMatchIndex === $index}">
+        <span class="close" ng-hide="$select.disabled" ng-click="$select.removeChoice($index)">&nbsp;&times;</span>
+        <span ng-transclude></span>
+    </button>
+  </span>
+</span>

src/bootstrap/select-multiple.tpl.html

@@ -0,0 +1,19 @@
+<div class="ui-select-multiple ui-select-bootstrap dropdown form-control" ng-class="{open: $select.open}">
+  <div>
+    <div>
+      <div class="ui-select-match"></div>
+      <input type="text"
+             autocomplete="off" 
+             autocorrect="off" 
+             autocapitalize="off" 
+             spellcheck="false" 
+             class="ui-select-search input-xs"
+             placeholder="{{$select.getPlaceholder()}}"
+             ng-disabled="$select.disabled"
+             ng-hide="$select.disabled"
+             ng-click="$select.activate()"
+             ng-model="$select.search">
+    </div>
+  </div>
+  <div class="ui-select-choices"></div>
+</div>

src/select.css

@@ -45,13 +45,26 @@
   right: 15px;
 }
 
-.ui-select-bootstrap > .ui-select-choices {
-  width: 100%;
-}
-
 /* See Scrollable Menu with Bootstrap 3 http://stackoverflow.com/questions/19227496 */
 .ui-select-bootstrap > .ui-select-choices {
+  width: 100%;
   height: auto;
   max-height: 200px;
   overflow-x: hidden;
 }
+
+.ui-select-multiple.ui-select-bootstrap {
+  height: auto;
+  padding: .3em;
+}
+
+.ui-select-multiple.ui-select-bootstrap input.ui-select-search {
+  background-color: transparent !important; /* To prevent double background when disabled */
+  border: none;
+  outline: none;
+  height: 1.666666em;
+}
+
+.ui-select-multiple.ui-select-bootstrap .ui-select-match .close {
+  font-size: 1.6em;
+}