Skip to content

Commit 6d2429d

Browse files
jspdownjspdown
committed
Merge pull request #35 from Kurmaev/master
#29 Dropdown enhancements
2 parents 79cf4ad + 34bf323 commit 6d2429d

File tree

7 files changed

+208
-112
lines changed

7 files changed

+208
-112
lines changed

‎dist/angular-semantic-ui.js

+55-32
Original file line numberDiff line numberDiff line change
@@ -288,22 +288,45 @@ angular.module('angularify.semantic.dimmer', [])
288288
angular.module('angularify.semantic.dropdown', [])
289289
.controller('DropDownController', ['$scope',
290290
function($scope) {
291-
$scope.items = [];
291+
$scope.options = [];
292292

293-
this.add_item = function(scope) {
294-
$scope.items.push(scope);
295-
return $scope.items;
293+
this.add_option = function(title, value){
294+
$scope.options.push({'title': title, 'value': value});
295+
if (value == $scope.model){
296+
this.update_title(value)
297+
};
296298
};
297299

298-
this.remove_item = function(scope) {
299-
var index = $scope.items.indexOf(scope);
300-
if (index !== -1)
301-
$scope.items.splice(index, 1);
300+
this.remove_option = function(title, value){
301+
for (var index in $scope.options)
302+
if ($scope.options[index].value == value &&
303+
$scope.options[index].title == title){
304+
305+
$scope.options.splice(index, 1);
306+
// Remove only one item
307+
break;
308+
};
302309
};
303310

304-
this.update_title = function(title) {
305-
for (var i in $scope.items) {
306-
$scope.items[i].title = title;
311+
this.update_model = function (title, value) {
312+
if ($scope.model !== value)
313+
$scope.model = value;
314+
};
315+
316+
this.update_title = function (value) {
317+
var changed = false;
318+
319+
for (var index in $scope.options)
320+
if ($scope.options[index].value == value){
321+
$scope.title = $scope.options[index].title;
322+
changed = true;
323+
}
324+
325+
if (changed){
326+
$scope.text_class = 'text';
327+
} else{
328+
$scope.title = $scope.original_title;
329+
$scope.text_class = 'default text';
307330
}
308331
};
309332

@@ -340,26 +363,14 @@ angular.module('angularify.semantic.dropdown', [])
340363
} else {
341364
scope.is_open = false;
342365
}
343-
DropDownController.add_item(scope);
344-
345-
/*
346-
* Watch for title changing
347-
*/
348-
scope.$watch('title', function(val, oldVal) {
349-
if (val === undefined || val === oldVal || val === scope.original_title)
350-
return;
351-
352-
scope.text_class = 'text';
353-
scope.model = val;
354-
});
355366

356367
/*
357368
* Watch for ng-model changing
358369
*/
359-
scope.$watch('model', function(val) {
370+
scope.element = element;
371+
scope.$watch('model', function (value) {
360372
// update title or reset the original title if its empty
361-
scope.model = val;
362-
DropDownController.update_title(val || scope.original_title);
373+
DropDownController.update_title(value);
363374
});
364375

365376
/*
@@ -372,8 +383,6 @@ angular.module('angularify.semantic.dropdown', [])
372383
scope.menu_class = 'menu transition visible';
373384
});
374385
} else {
375-
if (scope.title !== scope.original_title)
376-
scope.model = scope.title;
377386
scope.$apply(function() {
378387
scope.dropdown_class = 'ui selection dropdown';
379388
scope.menu_class = 'menu transition hidden';
@@ -392,25 +401,39 @@ angular.module('angularify.semantic.dropdown', [])
392401
transclude: true,
393402
require: '^dropdown',
394403
scope: {
395-
title: '=title'
404+
title: '=title',
405+
value: '=value'
396406
},
397-
template: '<div class="item" ng-transclude >{{ item_title }}</div>',
407+
template: '<div class="item" ng-transclude>{{ item_title }}</div>',
398408
link: function(scope, element, attrs, DropDownController) {
399409

400410
// Check if title= was set... if not take the contents of the dropdown-group tag
401411
// title= is for dynamic variables from something like ng-repeat {{variable}}
402412
if (scope.title === undefined) {
403-
scope.item_title = element.children()[0].innerHTML;
413+
scope.item_title = attrs.title || element.children()[0].innerHTML;
404414
} else {
405415
scope.item_title = scope.title;
406416
}
417+
if (scope.value === undefined) {
418+
scope.item_value = attrs.value || scope.item_title;
419+
} else {
420+
scope.item_value = scope.value;
421+
}
422+
423+
// Keep this option
424+
DropDownController.add_option(scope.item_title, scope.item_value);
407425

408426
//
409427
// Menu item click handler
410428
//
411429
element.bind('click', function() {
412-
DropDownController.update_title(scope.item_title);
430+
DropDownController.update_model(scope.item_title, scope.item_value);
413431
});
432+
433+
scope.$on('$destroy', function(){
434+
DropDownController.remove_option(scope.item_title, scope.item_value);
435+
});
436+
414437
}
415438
};
416439
});

‎dist/angular-semantic-ui.min.js

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/dropdown/README.md

+4-3
Original file line numberDiff line numberDiff line change
@@ -19,19 +19,20 @@ or
1919

2020
```html
2121
<dropdown title="my dropdown" ng-model="category_model">
22-
<dropdown-group title="c" ng-repeat="c in catetories">{{c}}</dropdown-group>
22+
<dropdown-group value="c.value" title="c.title" ng-repeat="c in catetories">{{c.title}}</dropdown-group>
2323
</dropdown>
2424
```
2525

2626
`dropdown` - can have following attributes:
2727

28-
* `title` - title of the dropdown;
28+
* `title` - title(placeholder) of the dropdown;
2929
* `ng-model` - angular model;
3030
* `open` - `true` || `false`. is current dropdown opened.
3131

3232
`dropdown-group` - can have following attributes:
3333

34-
* `title` - optional setting to set the name and value of the entry. Helpful for those {{variables}} that don't.
34+
* `title` - optional setting to set the name and value (if value not specified) of the entry. Helpful for those {{variables}} that don't;
35+
* `value` - set item value.
3536

3637
Contribution
3738
-------------------------------

‎src/dropdown/docs/controllers.js

+10
Original file line numberDiff line numberDiff line change
@@ -13,5 +13,15 @@ function RootCtrl ($scope) {
1313
'item3',
1414
'item4'
1515
];
16+
17+
$scope.dropdown_key_value_model = '';
18+
$scope.dropdown_key_value_items = {
19+
'item1': 'Cool item 1',
20+
'item2': 'Cool item 2',
21+
'item3': 'Cool item 3',
22+
'item4': 'Cool item 4'
23+
};
24+
25+
1626
}
1727

‎src/dropdown/docs/demo.html

+11-1
Original file line numberDiff line numberDiff line change
@@ -28,8 +28,18 @@ <h2>With ng-repeat</h2>
2828
<p class="ui info message">
2929
Current selection is: {{ dropdown_repeat_model }}
3030
</p>
31+
32+
<h2>With ng-repeat and key/value objects</h2>
33+
34+
<dropdown title="my dropdown" ng-model="dropdown_key_value_model" open="false">
35+
<dropdown-group value="key" title="title" ng-repeat="(key, title) in dropdown_key_value_items">{{ title }}</dropdown-group>
36+
</dropdown>
37+
38+
<p class="ui info message">
39+
Current selection is: {{ dropdown_key_value_model }}
40+
</p>
3141
<script src="../../../bower_components/angular/angular.min.js" type="text/javascript"></script>
3242
<script src="../dropdown.js" type="text/javascript"></script>
3343
<script src="controllers.js" type="text/javascript"></script>
3444
</body>
35-
</html>
45+
</html>

‎src/dropdown/dropdown.js

+55-32
Original file line numberDiff line numberDiff line change
@@ -3,22 +3,45 @@
33
angular.module('angularify.semantic.dropdown', [])
44
.controller('DropDownController', ['$scope',
55
function($scope) {
6-
$scope.items = [];
6+
$scope.options = [];
77

8-
this.add_item = function(scope) {
9-
$scope.items.push(scope);
10-
return $scope.items;
8+
this.add_option = function(title, value){
9+
$scope.options.push({'title': title, 'value': value});
10+
if (value == $scope.model){
11+
this.update_title(value)
12+
};
1113
};
1214

13-
this.remove_item = function(scope) {
14-
var index = $scope.items.indexOf(scope);
15-
if (index !== -1)
16-
$scope.items.splice(index, 1);
15+
this.remove_option = function(title, value){
16+
for (var index in $scope.options)
17+
if ($scope.options[index].value == value &&
18+
$scope.options[index].title == title){
19+
20+
$scope.options.splice(index, 1);
21+
// Remove only one item
22+
break;
23+
};
24+
};
25+
26+
this.update_model = function (title, value) {
27+
if ($scope.model !== value)
28+
$scope.model = value;
1729
};
1830

19-
this.update_title = function(title) {
20-
for (var i in $scope.items) {
21-
$scope.items[i].title = title;
31+
this.update_title = function (value) {
32+
var changed = false;
33+
34+
for (var index in $scope.options)
35+
if ($scope.options[index].value == value){
36+
$scope.title = $scope.options[index].title;
37+
changed = true;
38+
}
39+
40+
if (changed){
41+
$scope.text_class = 'text';
42+
} else{
43+
$scope.title = $scope.original_title;
44+
$scope.text_class = 'default text';
2245
}
2346
};
2447

@@ -55,26 +78,14 @@ angular.module('angularify.semantic.dropdown', [])
5578
} else {
5679
scope.is_open = false;
5780
}
58-
DropDownController.add_item(scope);
59-
60-
/*
61-
* Watch for title changing
62-
*/
63-
scope.$watch('title', function(val, oldVal) {
64-
if (val === undefined || val === oldVal || val === scope.original_title)
65-
return;
66-
67-
scope.text_class = 'text';
68-
scope.model = val;
69-
});
7081

7182
/*
7283
* Watch for ng-model changing
7384
*/
74-
scope.$watch('model', function(val) {
85+
scope.element = element;
86+
scope.$watch('model', function (value) {
7587
// update title or reset the original title if its empty
76-
scope.model = val;
77-
DropDownController.update_title(val || scope.original_title);
88+
DropDownController.update_title(value);
7889
});
7990

8091
/*
@@ -87,8 +98,6 @@ angular.module('angularify.semantic.dropdown', [])
8798
scope.menu_class = 'menu transition visible';
8899
});
89100
} else {
90-
if (scope.title !== scope.original_title)
91-
scope.model = scope.title;
92101
scope.$apply(function() {
93102
scope.dropdown_class = 'ui selection dropdown';
94103
scope.menu_class = 'menu transition hidden';
@@ -107,25 +116,39 @@ angular.module('angularify.semantic.dropdown', [])
107116
transclude: true,
108117
require: '^dropdown',
109118
scope: {
110-
title: '=title'
119+
title: '=title',
120+
value: '=value'
111121
},
112-
template: '<div class="item" ng-transclude >{{ item_title }}</div>',
122+
template: '<div class="item" ng-transclude>{{ item_title }}</div>',
113123
link: function(scope, element, attrs, DropDownController) {
114124

115125
// Check if title= was set... if not take the contents of the dropdown-group tag
116126
// title= is for dynamic variables from something like ng-repeat {{variable}}
117127
if (scope.title === undefined) {
118-
scope.item_title = element.children()[0].innerHTML;
128+
scope.item_title = attrs.title || element.children()[0].innerHTML;
119129
} else {
120130
scope.item_title = scope.title;
121131
}
132+
if (scope.value === undefined) {
133+
scope.item_value = attrs.value || scope.item_title;
134+
} else {
135+
scope.item_value = scope.value;
136+
}
137+
138+
// Keep this option
139+
DropDownController.add_option(scope.item_title, scope.item_value);
122140

123141
//
124142
// Menu item click handler
125143
//
126144
element.bind('click', function() {
127-
DropDownController.update_title(scope.item_title);
145+
DropDownController.update_model(scope.item_title, scope.item_value);
146+
});
147+
148+
scope.$on('$destroy', function(){
149+
DropDownController.remove_option(scope.item_title, scope.item_value);
128150
});
151+
129152
}
130153
};
131154
});

0 commit comments

Comments
 (0)