Skip to content

Commit dcbd379

Browse files
author
0xAX
committed
Initial dropdown
1 parent fbaeecf commit dcbd379

File tree

6 files changed

+125
-4
lines changed

6 files changed

+125
-4
lines changed

‎src/angularify.semantic.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
angular.module('angularify.semantic', ['angularify.semantic.accordion',
22
'angularify.semantic.checkbox',
3-
'angularify.semantic.dimmer']);
3+
'angularify.semantic.dimmer',
4+
'angularify.semantic.dropdown']);

‎src/dimmer/docs/controllers.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
var dimmerApp = angular.module('dimmerApp', ['angularify.semantic.dimmer']);
22

33
function RootCtrl ($scope) {
4-
$scope.dimmer = function(){
5-
$scope.show_dimmer = true;
6-
}
4+
$scope.dimmer = function(){
5+
$scope.show_dimmer = true;
6+
}
77
}
88

‎src/dropdown/README.md‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
angularify.semantic.dropdown
2+
===============================
3+
4+
`angularify.semantic.dropdown` - dropdown directive for angular.js.
5+
6+
Usage
7+
-------------------------------
8+
9+
```html
10+
<dropdown title="my dropdown" ng-model="dropdown_model" open="true">
11+
<dropdown-gropup>item1</dropdown-gropup>
12+
<dropdown-gropup>item2</dropdown-gropup>
13+
<dropdown-gropup>item3</dropdown-gropup>
14+
<dropdown-gropup>item4</dropdown-gropup>
15+
</dropdown>
16+
```
17+
18+
Contribution
19+
-------------------------------
20+
21+
1. Fork main [repository](https://github.com/angularify/angular-semantic-ui).
22+
2. Make changes.
23+
3. Create issue.
24+
4. Send pull request.
25+
5. Thank you.
26+
27+
TODO
28+
-------------------------------
29+
30+
1. Add different dropdown types.

‎src/dropdown/docs/controllers.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
var dropdownApp = angular.module('dropdownApp', ['angularify.semantic.dropdown']);
2+
3+
function RootCtrl ($scope) {
4+
$scope.hello = function(){
5+
alert('hello');
6+
}
7+
}
8+

‎src/dropdown/docs/demo.html‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!DOCTYPE HTML>
2+
<html ng-app="dropdownApp">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Semantic UI + Angular.JS</title>
6+
<link href="../../../bower_components/semantic/build/packaged/css/semantic.min.css" rel="stylesheet" type="text/css" />
7+
</head>
8+
<body ng-controller="RootCtrl">
9+
<dropdown title="my dropdown" ng-model="dropdown_model" open="true">
10+
<dropdown-group>item1</dropdown-group>
11+
<dropdown-group>item2</dropdown-group>
12+
<dropdown-group>item3</dropdown-group>
13+
<dropdown-group>item4</dropdown-group>
14+
</dropdown>
15+
<script src="../../../bower_components/angular/angular.min.js" type="text/javascript"></script>
16+
<script src="../../angularify.semantic.js" type="text/javascript"></script>
17+
<script src="../dropdown.js" type="text/javascript"></script>
18+
<script src="controllers.js" type="text/javascript"></script>
19+
</body>
20+
</html>

‎src/dropdown/dropdown.js‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
'use strict';
2+
3+
angular.module('angularify.semantic.dropdown', [])
4+
5+
.controller('DropDownController', ['$scope', function($scope){
6+
7+
}])
8+
9+
.directive("dropdown", function () {
10+
return {
11+
restrict: 'E',
12+
replace: true,
13+
transclude: true,
14+
controller: 'DropDownController',
15+
scope: {
16+
title : "@",
17+
open : "@"
18+
},
19+
template: "<div class=\"{{dropdown_class}}\">" +
20+
"<div class=\"default text\">{{title}}</div>" +
21+
"<i class=\"dropdown icon\"></i>" +
22+
"<div class=\"menu\" ng-transclude>" +
23+
"</div>" +
24+
"</div>",
25+
link: function(scope, element, attrs){
26+
scope.dropdown_class = 'ui selection dropdown';
27+
28+
if (scope.open == "true"){
29+
scope.open = true;
30+
scope.dropdown_class = scope.dropdown_class + ' active visible';
31+
}
32+
else
33+
scope.open = false;
34+
35+
//
36+
// Click handler
37+
//
38+
element.bind('click', function(){
39+
if (scope.open == false){
40+
scope.open = true;
41+
scope.$apply(function(){scope.dropdown_class = 'ui selection dropdown active visible'});
42+
} else {
43+
scope.open = false;
44+
scope.$apply(function(){scope.dropdown_class = 'ui selection dropdown'});
45+
}
46+
});
47+
}
48+
}
49+
})
50+
51+
.directive("dropdownGroup", function(){
52+
return {
53+
restrict: 'E',
54+
replace: true,
55+
transclude: true,
56+
require: '^dropdown',
57+
template: '<div class="item" ng-transclude></div>',
58+
link: function(scope, element, attrs){
59+
60+
}
61+
}
62+
});

0 commit comments

Comments
 (0)