Skip to content

Commit 79cf4ad

Browse files
jspdownjspdown
committed
Merge pull request #37 from KapuzenSohn/dropdown
 Change CSS after a Item was selected
2 parents 7e07238 + 0dde387 commit 79cf4ad

File tree

3 files changed

+229
-227
lines changed

3 files changed

+229
-227
lines changed

‎dist/angular-semantic-ui.js‎

Lines changed: 115 additions & 115 deletions
Original file line numberDiff line numberDiff line change
@@ -197,7 +197,6 @@ angular.module('angularify.semantic.checkbox', [])
197197
scope.checkbox_class += ' disabled';
198198
}
199199

200-
201200
//
202201
// Click handler
203202
//
@@ -287,133 +286,134 @@ angular.module('angularify.semantic.dimmer', [])
287286
'use strict';
288287

289288
angular.module('angularify.semantic.dropdown', [])
290-
.controller('DropDownController', ['$scope',
291-
function ($scope) {
292-
$scope.items = [];
293-
294-
this.add_item = function (scope) {
295-
$scope.items.push(scope);
296-
return $scope.items;
297-
};
298-
299-
this.remove_item = function (scope) {
300-
var index = $scope.items.indexOf(scope);
301-
if (index !== -1)
302-
$scope.items.splice(index, 1);
303-
};
304-
305-
this.update_title = function (title) {
306-
for (var i in $scope.items) {
307-
$scope.items[i].title = title;
308-
}
309-
};
310-
289+
.controller('DropDownController', ['$scope',
290+
function($scope) {
291+
$scope.items = [];
292+
293+
this.add_item = function(scope) {
294+
$scope.items.push(scope);
295+
return $scope.items;
296+
};
297+
298+
this.remove_item = function(scope) {
299+
var index = $scope.items.indexOf(scope);
300+
if (index !== -1)
301+
$scope.items.splice(index, 1);
302+
};
303+
304+
this.update_title = function(title) {
305+
for (var i in $scope.items) {
306+
$scope.items[i].title = title;
311307
}
312-
])
308+
};
313309

314-
.directive('dropdown', function () {
315-
return {
316-
restrict: 'E',
317-
replace: true,
318-
transclude: true,
319-
controller: 'DropDownController',
320-
scope: {
321-
title: '@',
322-
open: '@',
323-
model: '=ngModel'
324-
},
325-
template: '<div class="{{ dropdown_class }}">' +
326-
'<div class="default text">{{ title }}</div>' +
327-
'<i class="dropdown icon"></i>' +
328-
'<div class="{{ menu_class }}" ng-transclude>' +
329-
'</div>' +
330-
'</div>',
331-
link: function (scope, element, attrs, DropDownController) {
332-
scope.dropdown_class = 'ui selection dropdown';
333-
scope.menu_class = 'menu transition hidden';
334-
scope.original_title = scope.title;
310+
}
311+
])
335312

336-
if (scope.open === 'true') {
337-
scope.is_open = true;
338-
scope.dropdown_class = scope.dropdown_class + ' active visible';
339-
scope.menu_class = scope.menu_class + ' visible';
340-
} else {
341-
scope.is_open = false;
342-
}
343-
DropDownController.add_item(scope);
313+
.directive('dropdown', function() {
314+
return {
315+
restrict: 'E',
316+
replace: true,
317+
transclude: true,
318+
controller: 'DropDownController',
319+
scope: {
320+
title: '@',
321+
open: '@',
322+
model: '=ngModel'
323+
},
324+
template: '<div class="{{ dropdown_class }}">' +
325+
'<div class="{{text_class}}">{{ title }}</div>' +
326+
'<i class="dropdown icon"></i>' +
327+
'<div class="{{ menu_class }}" ng-transclude>' +
328+
'</div>' +
329+
'</div>',
330+
link: function(scope, element, attrs, DropDownController) {
331+
scope.dropdown_class = 'ui selection dropdown';
332+
scope.menu_class = 'menu transition hidden';
333+
scope.text_class = 'default text';
334+
scope.original_title = scope.title;
335+
336+
if (scope.open === 'true') {
337+
scope.is_open = true;
338+
scope.dropdown_class = scope.dropdown_class + ' active visible';
339+
scope.menu_class = scope.menu_class + ' visible';
340+
} else {
341+
scope.is_open = false;
342+
}
343+
DropDownController.add_item(scope);
344344

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;
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;
351351

352-
scope.model = val;
353-
});
352+
scope.text_class = 'text';
353+
scope.model = val;
354+
});
354355

355-
/*
356-
* Watch for ng-model changing
357-
*/
358-
scope.$watch('model', function (val) {
359-
// update title or reset the original title if its empty
360-
scope.model = val;
361-
DropDownController.update_title(val || scope.original_title);
362-
});
356+
/*
357+
* Watch for ng-model changing
358+
*/
359+
scope.$watch('model', function(val) {
360+
// update title or reset the original title if its empty
361+
scope.model = val;
362+
DropDownController.update_title(val || scope.original_title);
363+
});
363364

364-
/*
365-
* Click handler
366-
*/
367-
element.bind('click', function () {
368-
if (scope.is_open === false) {
369-
scope.$apply(function () {
370-
scope.dropdown_class = 'ui selection dropdown active visible';
371-
scope.menu_class = 'menu transition visible';
372-
});
373-
} else {
374-
if (scope.title !== scope.original_title)
375-
scope.model = scope.title;
376-
scope.$apply(function () {
377-
scope.dropdown_class = 'ui selection dropdown';
378-
scope.menu_class = 'menu transition hidden';
379-
});
380-
}
381-
scope.is_open =! scope.is_open;
382-
});
365+
/*
366+
* Click handler
367+
*/
368+
element.bind('click', function() {
369+
if (scope.is_open === false) {
370+
scope.$apply(function() {
371+
scope.dropdown_class = 'ui selection dropdown active visible';
372+
scope.menu_class = 'menu transition visible';
373+
});
374+
} else {
375+
if (scope.title !== scope.original_title)
376+
scope.model = scope.title;
377+
scope.$apply(function() {
378+
scope.dropdown_class = 'ui selection dropdown';
379+
scope.menu_class = 'menu transition hidden';
380+
});
383381
}
384-
};
382+
scope.is_open = !scope.is_open;
383+
});
384+
}
385+
};
385386
})
386387

387-
.directive('dropdownGroup', function () {
388-
return {
389-
restrict: 'AE',
390-
replace: true,
391-
transclude: true,
392-
require: '^dropdown',
393-
scope: {
394-
title: '=title'
395-
},
396-
template: '<div class="item" ng-transclude >{{ item_title }}</div>',
397-
link: function (scope, element, attrs, DropDownController) {
388+
.directive('dropdownGroup', function() {
389+
return {
390+
restrict: 'AE',
391+
replace: true,
392+
transclude: true,
393+
require: '^dropdown',
394+
scope: {
395+
title: '=title'
396+
},
397+
template: '<div class="item" ng-transclude >{{ item_title }}</div>',
398+
link: function(scope, element, attrs, DropDownController) {
398399

399-
// Check if title= was set... if not take the contents of the dropdown-group tag
400-
// title= is for dynamic variables from something like ng-repeat {{variable}}
401-
if (scope.title === undefined) {
402-
scope.item_title = element.children()[0].innerHTML;
403-
} else {
404-
scope.item_title = scope.title;
405-
}
400+
// Check if title= was set... if not take the contents of the dropdown-group tag
401+
// title= is for dynamic variables from something like ng-repeat {{variable}}
402+
if (scope.title === undefined) {
403+
scope.item_title = element.children()[0].innerHTML;
404+
} else {
405+
scope.item_title = scope.title;
406+
}
406407

407-
//
408-
// Menu item click handler
409-
//
410-
element.bind('click', function () {
411-
DropDownController.update_title(scope.item_title);
412-
});
413-
}
414-
};
408+
//
409+
// Menu item click handler
410+
//
411+
element.bind('click', function() {
412+
DropDownController.update_title(scope.item_title);
413+
});
414+
}
415+
};
415416
});
416-
417417
'use strict';
418418

419419
angular.module('angularify.semantic.modal', [])

0 commit comments

Comments
 (0)