Skip to content

Commit 5787c04

Browse files
dimircdimirc
committed
Merge pull request angular-ui#138 from angular-ui/feat-multiple
Support for multi-selection
2 parents 6627376 + 22f67aa commit 5787c04

9 files changed

+1116
-151
lines changed

Diff for: ‎examples/demo-multi-select.html

+168
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,168 @@
1+
<!DOCTYPE html>
2+
<html lang="en" ng-app="demo">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>AngularJS ui-select</title>
6+
7+
<!--
8+
IE8 support, see AngularJS Internet Explorer Compatibility http://docs.angularjs.org/guide/ie
9+
For Firefox 3.6, you will also need to include jQuery and ECMAScript 5 shim
10+
-->
11+
<!--[if lt IE 9]>
12+
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.js"></script>
13+
<script src="http://cdnjs.cloudflare.com/ajax/libs/es5-shim/2.2.0/es5-shim.js"></script>
14+
<script>
15+
document.createElement('ui-select');
16+
document.createElement('ui-select-match');
17+
document.createElement('ui-select-choices');
18+
</script>
19+
<![endif]-->
20+
21+
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.17/angular.js"></script>
22+
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.17/angular-sanitize.js"></script>
23+
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.css">
24+
25+
<!-- ui-select files -->
26+
<script src="../dist/select.js"></script>
27+
<link rel="stylesheet" href="../dist/select.css">
28+
29+
<script src="demo.js"></script>
30+
31+
<!-- Select2 theme -->
32+
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/select2/3.4.5/select2.css">
33+
34+
<!--
35+
Selectize theme
36+
Less versions are available at https://github.com/brianreavis/selectize.js/tree/master/dist/less
37+
-->
38+
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.8.5/css/selectize.default.css">
39+
<!-- <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.8.5/css/selectize.bootstrap2.css"> -->
40+
<!-- <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.8.5/css/selectize.bootstrap3.css"> -->
41+
42+
<style>
43+
body {
44+
padding: 15px;
45+
}
46+
47+
.select2 > .select2-choice.ui-select-match {
48+
/* Because of the inclusion of Bootstrap */
49+
height: 29px;
50+
}
51+
52+
.selectize-control > .selectize-dropdown {
53+
top: 36px;
54+
}
55+
</style>
56+
</head>
57+
58+
<body ng-controller="DemoCtrl">
59+
<script src="demo.js"></script>
60+
61+
<button class="btn btn-default btn-xs" ng-click="enable()">Enable ui-select</button>
62+
<button class="btn btn-default btn-xs" ng-click="disable()">Disable ui-select</button>
63+
<button class="btn btn-default btn-xs" ng-click="clear()">Clear ng-model</button>
64+
65+
<!-- <h1>Bootstrap theme</h1>
66+
<ui-select ng-model="address.selected"
67+
theme="bootstrap"
68+
ng-disabled="disabled"
69+
reset-search-input="false"
70+
style="width: 300px;">
71+
<ui-select-match placeholder="Enter an address...">{{$select.selected.formatted_address}}</ui-select-match>
72+
<ui-select-choices repeat="address in addresses track by $index"
73+
refresh="refreshAddresses($select.search)"
74+
refresh-delay="0">
75+
<div ng-bind-html="address.formatted_address | highlight: $select.search"></div>
76+
</ui-select-choices>
77+
</ui-select>
78+
<p>Selected: {{address.selected.formatted_address}}</p>
79+
80+
<h3>Multi select</h3>
81+
<ui-select multiple ng-model="friends" theme="bootstrap" ng-disabled="disabled" style="width: 300px;">
82+
<ui-select-match placeholder="Search and select friends...">{{$item.name}}</ui-select-match>
83+
<ui-select-choices repeat="person in people | propsFilter: {name: $select.search, age: $select.search}">
84+
<div ng-bind-html="person.name | highlight: $select.search"></div>
85+
<small>
86+
age: <span ng-bind-html="''+person.age | highlight: $select.search"></span>
87+
</small>
88+
</ui-select-choices>
89+
</ui-select>
90+
<p>Selected: {{friends|json}}</p>
91+
-->
92+
<!-- <ui-select ng-model="person.selected" theme="select2" ng-disabled="disabled" style="min-width: 300px;">
93+
<ui-select-match placeholder="Select a person in the list or search his name/age...">{{$select.selected.name}}</ui-select-match>
94+
<ui-select-choices repeat="person in people | propsFilter: {name: $select.search, age: $select.search}">
95+
<div ng-bind-html="person.name | highlight: $select.search"></div>
96+
<small>
97+
email: {{person.email}}
98+
age: <span ng-bind-html="''+person.age | highlight: $select.search"></span>
99+
</small>
100+
</ui-select-choices>
101+
</ui-select>
102+
<p>Selected: {{person.selected}}</p> -->
103+
<!-- <h1>Selectize theme</h1>
104+
<ui-select ng-model="country.selected" theme="selectize" ng-disabled="disabled" style="width: 300px;">
105+
<ui-select-match placeholder="Select or search a country in the list...">{{$select.selected.name}}</ui-select-match>
106+
<ui-select-choices repeat="country in countries | filter: $select.search">
107+
<span ng-bind-html="country.name | highlight: $select.search"></span>
108+
<small ng-bind-html="country.code | highlight: $select.search"></small>
109+
</ui-select-choices>
110+
</ui-select>
111+
<p>Selected: {{country.selected}}</p> -->
112+
113+
<h1>Multi Selection Demos</h1>
114+
115+
<h3>Array of strings</h3>
116+
<ui-select multiple ng-model="multipleDemo.colors" theme="bootstrap" ng-disabled="disabled" style="width: 300px;">
117+
<ui-select-match placeholder="Select colors...">{{$item}}</ui-select-match>
118+
<ui-select-choices repeat="color in availableColors | filter:$select.search">
119+
{{color}}
120+
</ui-select-choices>
121+
</ui-select>
122+
<p>Selected: {{multipleDemo.colors}}</p>
123+
<hr>
124+
<h3>Array of objects</h3>
125+
<ui-select multiple ng-model="multipleDemo.selectedPeople" theme="bootstrap" ng-disabled="disabled" style="width: 800px;">
126+
<ui-select-match placeholder="Select person...">{{$item.name}} &lt;{{$item.email}}&gt;</ui-select-match>
127+
<ui-select-choices repeat="person in people | propsFilter: {name: $select.search, age: $select.search}">
128+
<div ng-bind-html="person.name | highlight: $select.search"></div>
129+
<small>
130+
email: {{person.email}}
131+
age: <span ng-bind-html="''+person.age | highlight: $select.search"></span>
132+
</small>
133+
</ui-select-choices>
134+
</ui-select>
135+
<p>Selected: {{multipleDemo.selectedPeople}}</p>
136+
137+
<hr>
138+
<h3>Array of objects with single property binding</h3>
139+
<ui-select multiple ng-model="multipleDemo.selectedPeopleSimple" theme="bootstrap" ng-disabled="disabled" style="width: 800px;">
140+
<ui-select-match placeholder="Select person...">{{$item.name}} &lt;{{$item.email}}&gt;</ui-select-match>
141+
<ui-select-choices repeat="person.email as person in people | propsFilter: {name: $select.search, age: $select.search}">
142+
<div ng-bind-html="person.name | highlight: $select.search"></div>
143+
<small>
144+
email: {{person.email}}
145+
age: <span ng-bind-html="''+person.age | highlight: $select.search"></span>
146+
</small>
147+
</ui-select-choices>
148+
</ui-select>
149+
<p>Selected: {{multipleDemo.selectedPeopleSimple}}</p>
150+
151+
<hr>
152+
<h3>Array of objects (with groupBy)</h3>
153+
<ui-select multiple ng-model="multipleDemo.selectedPeopleWithGroupBy" theme="bootstrap" ng-disabled="disabled" style="width: 800px;">
154+
<ui-select-match placeholder="Select person...">{{$item.name}} &lt;{{$item.email}}&gt;</ui-select-match>
155+
<ui-select-choices group-by="someGroupFn" repeat="person in people | propsFilter: {name: $select.search, age: $select.search}">
156+
<div ng-bind-html="person.name | highlight: $select.search"></div>
157+
<small>
158+
email: {{person.email}}
159+
age: <span ng-bind-html="''+person.age | highlight: $select.search"></span>
160+
</small>
161+
</ui-select-choices>
162+
</ui-select>
163+
<p>Selected: {{multipleDemo.selectedPeopleWithGroupBy}}</p>
164+
165+
<div style="height:500px"></div>
166+
167+
</body>
168+
</html>

Diff for: ‎examples/demo.js

+10-1
Original file line numberDiff line numberDiff line change
@@ -110,9 +110,18 @@ app.controller('DemoCtrl', function($scope, $http, $timeout) {
110110
{ name: 'Nicole', email: '[email protected]', age: 43, country: 'Colombia' },
111111
{ name: 'Natasha', email: '[email protected]', age: 54, country: 'Ecuador' },
112112
{ name: 'Michael', email: '[email protected]', age: 15, country: 'Colombia' },
113-
{ name: 'Nicolás', email: 'nicole@email.com', age: 43, country: 'Colombia' }
113+
{ name: 'Nicolás', email: 'nicolas@email.com', age: 43, country: 'Colombia' }
114114
];
115115

116+
$scope.availableColors = ['Red','Green','Blue','Yellow','Magenta','Maroon','Umbra','Turquoise'];
117+
118+
$scope.multipleDemo = {};
119+
$scope.multipleDemo.colors = ['Blue','Red'];
120+
$scope.multipleDemo.selectedPeople = [$scope.people[5], $scope.people[4]];
121+
$scope.multipleDemo.selectedPeopleWithGroupBy = [$scope.people[8], $scope.people[6]];
122+
$scope.multipleDemo.selectedPeopleSimple = ['[email protected]','[email protected]'];
123+
124+
116125
$scope.address = {};
117126
$scope.refreshAddresses = function(address) {
118127
var params = {address: address, sensor: false};

Diff for: ‎src/bootstrap/match-multiple.tpl.html

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<span class="ui-select-match">
2+
<span ng-repeat="$item in $select.selected">
3+
<button
4+
style="margin-right: 3px;"
5+
class="ui-select-match-item btn btn-default btn-xs"
6+
tabindex="-1"
7+
ng-disabled="$select.disabled"
8+
ng-click="$select.activeMatchIndex = $index;"
9+
ng-class="{'btn-primary':$select.activeMatchIndex === $index}">
10+
<span class="close ui-select-match-close" ng-hide="$select.disabled" ng-click="$select.removeChoice($index)">&nbsp;&times;</span>
11+
<span uis-transclude-append></span>
12+
</button>
13+
</span>
14+
</span>

Diff for: ‎src/bootstrap/select-multiple.tpl.html

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<div class="ui-select-multiple ui-select-bootstrap dropdown form-control" ng-class="{open: $select.open}">
2+
<div>
3+
<div class="ui-select-match"></div>
4+
<input type="text"
5+
autocomplete="off"
6+
autocorrect="off"
7+
autocapitalize="off"
8+
spellcheck="false"
9+
class="ui-select-search input-xs"
10+
placeholder="{{$select.getPlaceholder()}}"
11+
ng-disabled="$select.disabled"
12+
ng-hide="$select.disabled"
13+
ng-click="$select.activate()"
14+
ng-model="$select.search">
15+
</div>
16+
<div class="ui-select-choices"></div>
17+
</div>

Diff for: ‎src/select.css

+18-4
Original file line numberDiff line numberDiff line change
@@ -88,17 +88,31 @@
8888
right: 15px;
8989
}
9090

91-
.ui-select-bootstrap > .ui-select-choices {
92-
width: 100%;
93-
}
94-
9591
/* See Scrollable Menu with Bootstrap 3 http://stackoverflow.com/questions/19227496 */
9692
.ui-select-bootstrap > .ui-select-choices {
93+
width: 100%;
9794
height: auto;
9895
max-height: 200px;
9996
overflow-x: hidden;
10097
}
10198

99+
.ui-select-multiple.ui-select-bootstrap {
100+
height: auto;
101+
padding: .3em;
102+
}
103+
104+
.ui-select-multiple.ui-select-bootstrap input.ui-select-search {
105+
background-color: transparent !important; /* To prevent double background when disabled */
106+
border: none;
107+
outline: none;
108+
height: 1.666666em;
109+
}
110+
111+
.ui-select-multiple.ui-select-bootstrap .ui-select-match .close {
112+
font-size: 1.6em;
113+
line-height: 0.75;
114+
}
115+
102116
.ui-select-bootstrap .ui-select-choices-row>a {
103117
display: block;
104118
padding: 3px 20px;

0 commit comments

Comments
 (0)