Skip to content

Commit 63c9d31

Browse files
mateusmirandaalmeidamateusmirandaalmeida
committed
criando tags
1 parent 31d4453 commit 63c9d31

File tree

7 files changed

+131
-45
lines changed

7 files changed

+131
-45
lines changed

‎bower.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "ng-ui-multi-select",
3-
"version": "1.0.0",
3+
"version": "1.1.0",
44
"description": "ng-ui-multi-select",
55
"main": "./src/index.js",
66
"authors": [

‎dist/ng-ui-multi-select.js‎

Lines changed: 44 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -153,31 +153,36 @@ var MultiSelectItem = {
153153
};
154154

155155
document.addEventListener('keydown', function (evt) {
156-
if (evt.keyCode == 9 && ctrl.ngValue && $element.find('div.item-container').hasClass('item-focused')) {
157-
ctrl.uiMultiSelectCtrl.addFocusInput();
158-
ctrl.uiMultiSelectCtrl.open();
156+
if (ctrl.ngValue && $element.find('div.item-container').hasClass('item-focused')) {
157+
switch (evt.keyCode) {
158+
case 8:
159+
ctrl.uiMultiSelectCtrl.handlingBackspace(evt);
160+
evt.stopPropagation();
161+
break;
162+
case 9:
163+
ctrl.uiMultiSelectCtrl.addFocusInput();
164+
ctrl.uiMultiSelectCtrl.open();
165+
break;
166+
case 37:
167+
ctrl.moveFocusToLeft(evt);
168+
break;
169+
case 46:
170+
ctrl.uiMultiSelectCtrl.handlingBackspace(evt);
171+
break;
172+
case 39:
173+
ctrl.moveFocusToRight(evt);
174+
break;
175+
}
159176
}
160177
});
161178

162179
document.addEventListener('keyup', function (evt) {
163180
$timeout(function () {
164181
if (ctrl.ngValue && $element.find('div.item-container')[0].classList.contains('item-focused')) {
165182
switch (evt.keyCode) {
166-
case 8:
167-
ctrl.uiMultiSelectCtrl.handlingBackspace(evt);
168-
break;
169183
case 9:
170184
ctrl.uiMultiSelectCtrl.addFocusInput();
171185
break;
172-
case 46:
173-
ctrl.uiMultiSelectCtrl.handlingBackspace(evt);
174-
break;
175-
case 37:
176-
ctrl.moveFocusToLeft(evt);
177-
break;
178-
case 39:
179-
ctrl.moveFocusToRight(evt);
180-
break;
181186
}
182187
}
183188
});
@@ -253,7 +258,9 @@ var MultiSelect = {
253258
ngDisabled: '=?',
254259
closeOnSelectItem: '=?',
255260
placeholder: '@?',
256-
searchField: '@?'
261+
searchField: '@?',
262+
tagging: '&?',
263+
taggingModel: '=?'
257264
},
258265
controller: ['$scope', '$attrs', '$timeout', '$element', function ($scope, $attrs, $timeout, $element) {
259266
var ctrl = this;
@@ -469,9 +476,21 @@ var MultiSelect = {
469476
case 13:
470477
if (!ctrl.opened) return;
471478
var liFocused = $element.find('ui-multi-select-option').find('li.option-container.option-focused');
472-
if (liFocused && liFocused[0]) {
479+
if (liFocused && liFocused[0] && !liFocused.hasClass('ng-hide')) {
473480
ctrl.addItem(liFocused.scope().$ctrl.ngValue, evt);
474481
ctrl.handligButtonUp(evt);
482+
} else {
483+
var value = $element.find('input').val();
484+
if (ctrl.tagging && ctrl.taggingModel && value && value.trim() != "") {
485+
var result = ctrl.tagging({
486+
value: value
487+
});
488+
if (result != null && result != undefined) {
489+
ctrl.addTagging(result);
490+
ctrl.addItem(result, evt);
491+
delete ctrl.inputValue;
492+
}
493+
}
475494
}
476495
break;
477496
}
@@ -488,6 +507,14 @@ var MultiSelect = {
488507
return document.removeEventListener('click', listenerClick);
489508
});
490509

510+
ctrl.addTagging = function (result) {
511+
if (!ctrl.taggingModel.filter(function (tagging) {
512+
return angular.equals(tagging, result);
513+
}).length > 0) {
514+
ctrl.taggingModel.push(result);
515+
}
516+
};
517+
491518
ctrl.filterOptions = function (option) {
492519
if (!ctrl.inputValue) return false;
493520
var isObject = angular.isObject(option);

‎dist/ng-ui-multi-select.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎index.html‎

Lines changed: 41 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html ng-app="app">
33
<head>
44
<meta charset="utf-8">
5-
<title>ng-easy-infinite-scroll</title>
5+
<title>ng-ui-multi-select</title>
66
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
77
<link rel="stylesheet" href="dist/ng-ui-multi-select.css">
88
</head>
@@ -59,11 +59,16 @@ <h3>Importação do módulo:</h3>
5959

6060

6161
<div class="row">
62-
<div class="col-md-4">
62+
<div class="col-md-12">
6363
<div class="form-group">
6464
<label>Funcionarios: </label>
6565

66-
<ui-multi-select placeholder="Buscar..." ng-model="funcionarios" close-on-select-item="false" ng-disabled="disabled">
66+
<ui-multi-select placeholder="Buscar..."
67+
ng-model="funcionarios"
68+
close-on-select-item="false"
69+
tagging="addItem(value)"
70+
tagging-model="items"
71+
ng-disabled="disabled">
6772
<ui-multi-select-item ng-repeat="item in funcionarios" ng-value="item">
6873
{{item.nome}}
6974
</ui-multi-select-item>
@@ -75,6 +80,7 @@ <h3>Importação do módulo:</h3>
7580
</div>
7681

7782
</div>
83+
7884
<div class="col-md-8">
7985
<label>Model: </label>
8086
<pre>{{funcionarios|json}}</pre>
@@ -88,7 +94,9 @@ <h3>HTML</h3>
8894
&lt;label&gt;Funcionarios: &lt;/label&gt;
8995
&lt;ui-multi-select placeholder="Buscar..."
9096
close-on-select-item="false"
91-
ng-model="funcionarios"&gt;
97+
ng-model="funcionarios"
98+
tagging="addItem(value)"
99+
tagging-model="items"&gt;
92100
&lt;ui-multi-select-item ng-repeat="item in funcionarios"
93101
ng-value="item"&gt;
94102
{{item.nome}}
@@ -104,14 +112,19 @@ <h3>HTML</h3>
104112
<h3>JavaScript</h3>
105113
<pre><code style="font-size: 10px;" class="prettyprint">angular.module('app', ['ngUiMultiSelect'])
106114
.controller('ctrl', function($scope, $timeout){
107-
$scope.selectedItems = [{"nome":"Mateus","idade":20}];
115+
$scope.selectedItems = [];
116+
108117
$scope.items = [
109118
{ nome: 'Mateus', idade: 20},
110119
{ nome: 'Thalita', idade: 19},
111120
{ nome: 'Willian', idade: 25},
112121
{ nome: 'Felipe', idade: 25},
113122
{ nome: 'Munif', idade: 50}
114-
]
123+
];
124+
125+
$scope.addItem = function(value){
126+
return { nome: value }
127+
};
115128
})</code></pre>
116129
</div>
117130
</div>
@@ -164,6 +177,22 @@ <h1>ui-multi-select</h1>
164177
[Boolean] - Atributo que decide se vai fechar ou não a caixa de opções.
165178
</td>
166179
</tr>
180+
<tr>
181+
<td>
182+
tagging
183+
</td>
184+
<td>
185+
[Function] - Função que será executada ao teclar enter para adicionar objeto na lista.
186+
</td>
187+
</tr>
188+
<tr>
189+
<td>
190+
tagging-model
191+
</td>
192+
<td>
193+
[Array] - Opções disponíveis para selecionar.
194+
</td>
195+
</tr>
167196
</table>
168197
</div>
169198
</div>
@@ -254,13 +283,18 @@ <h1>ui-multi-select-option</h1>
254283

255284
$scope.funcionarios = [];
256285

286+
$scope.addItem = function(value){
287+
return { nome: value}
288+
}
289+
257290
$scope.items = [
258291
{ nome: 'Mateus', idade: 20},
259292
{ nome: 'Thalita', idade: 19},
260293
{ nome: 'Willian', idade: 25},
261294
{ nome: 'Felipe', idade: 25},
262295
{ nome: 'Munif', idade: 50}
263-
]
296+
];
297+
264298
})
265299
</script>
266300

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "ng-ui-multi-select",
3-
"version": "1.0.0",
3+
"version": "1.1.0",
44
"description": "ng-ui-multi-select",
55
"main": "./src/index.js",
66
"directories": {

‎src/multi-select-item.js‎

Lines changed: 20 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -84,31 +84,36 @@ const MultiSelectItem = {
8484
}
8585

8686
document.addEventListener('keydown', evt => {
87-
if(evt.keyCode == 9 && ctrl.ngValue && $element.find('div.item-container').hasClass('item-focused')){
88-
ctrl.uiMultiSelectCtrl.addFocusInput();
89-
ctrl.uiMultiSelectCtrl.open();
87+
if(ctrl.ngValue && $element.find('div.item-container').hasClass('item-focused')){
88+
switch (evt.keyCode) {
89+
case 8:
90+
ctrl.uiMultiSelectCtrl.handlingBackspace(evt);
91+
evt.stopPropagation()
92+
break;
93+
case 9:
94+
ctrl.uiMultiSelectCtrl.addFocusInput();
95+
ctrl.uiMultiSelectCtrl.open();
96+
break;
97+
case 37:
98+
ctrl.moveFocusToLeft(evt);
99+
break;
100+
case 46:
101+
ctrl.uiMultiSelectCtrl.handlingBackspace(evt);
102+
break;
103+
case 39:
104+
ctrl.moveFocusToRight(evt);
105+
break;
106+
}
90107
}
91108
})
92109

93110
document.addEventListener('keyup', evt => {
94111
$timeout(() => {
95112
if(ctrl.ngValue && $element.find('div.item-container')[0].classList.contains('item-focused')){
96113
switch (evt.keyCode) {
97-
case 8:
98-
ctrl.uiMultiSelectCtrl.handlingBackspace(evt);
99-
break;
100114
case 9:
101115
ctrl.uiMultiSelectCtrl.addFocusInput();
102116
break;
103-
case 46:
104-
ctrl.uiMultiSelectCtrl.handlingBackspace(evt);
105-
break;
106-
case 37:
107-
ctrl.moveFocusToLeft(evt);
108-
break;
109-
case 39:
110-
ctrl.moveFocusToRight(evt);
111-
break;
112117
}
113118
}
114119
})

‎src/multi-select.js‎

Lines changed: 23 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,9 @@ const MultiSelect = {
2828
ngDisabled : '=?',
2929
closeOnSelectItem : '=?',
3030
placeholder : '@?',
31-
searchField : '@?'
31+
searchField : '@?',
32+
tagging : '&?',
33+
taggingModel : '=?'
3234
},
3335
controller: ['$scope','$attrs','$timeout','$element', function($scope,$attrs,$timeout,$element){
3436
let ctrl = this;
@@ -244,9 +246,21 @@ const MultiSelect = {
244246
case 13:
245247
if(!ctrl.opened) return;
246248
const liFocused = $element.find('ui-multi-select-option').find('li.option-container.option-focused');
247-
if(liFocused && liFocused[0]){
249+
if(liFocused && liFocused[0] && !liFocused.hasClass('ng-hide')){
248250
ctrl.addItem(liFocused.scope().$ctrl.ngValue, evt);
249251
ctrl.handligButtonUp(evt);
252+
}else{
253+
const value = $element.find('input').val();
254+
if (ctrl.tagging && ctrl.taggingModel && value && value.trim() != "") {
255+
let result = ctrl.tagging({
256+
value: value
257+
});
258+
if (result != null && result != undefined) {
259+
ctrl.addTagging(result);
260+
ctrl.addItem(result, evt);
261+
delete ctrl.inputValue
262+
}
263+
}
250264
}
251265
break;
252266
}
@@ -259,6 +273,12 @@ const MultiSelect = {
259273

260274
$scope.$on('$destroy', () => document.removeEventListener('click', listenerClick));
261275

276+
ctrl.addTagging = (result) => {
277+
if(!ctrl.taggingModel.filter((tagging) => angular.equals(tagging, result)).length > 0){
278+
ctrl.taggingModel.push(result);
279+
}
280+
}
281+
262282
ctrl.filterOptions = option => {
263283
if(!ctrl.inputValue) return false;
264284
let isObject = angular.isObject(option);
@@ -293,7 +313,7 @@ const MultiSelect = {
293313

294314
ctrl.removeItem = (value, evt) => {
295315
if(ctrl.ngDisabled) return;
296-
$timeout(()=>{
316+
$timeout(() => {
297317
ctrl.ngModel = ctrl.ngModel || [];
298318
ctrl.ngModel = ctrl.ngModel.filter(item => {
299319
return !angular.equals(item, value);

0 commit comments

Comments
 (0)