├── .gitignore ├── dist ├── fancyselect.templ.html ├── fancyselect.js └── fancyselect.css ├── app.js ├── index.html └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | .idea -------------------------------------------------------------------------------- /dist/fancyselect.templ.html: -------------------------------------------------------------------------------- 1 |

2 |

3 | {{selectedValue}} 4 | {{label}} 5 | 6 |

7 |

8 |

9 |

10 | {{uniqueKey !== undefined ? item[displayKey] : item}} 11 |

12 |

13 |

14 |

15 | -------------------------------------------------------------------------------- /app.js: -------------------------------------------------------------------------------- 1 | var app = angular.module("fancySelectExample", ['fancyselect']); 2 | 3 | app.controller("MyController", function($scope) { 4 | $scope.sportsList = [{ 5 | id : 0, 6 | name: "Volleyball", 7 | likes: 5 8 | }, { 9 | id: 1, 10 | name: "Tennis", 11 | likes:6 12 | 13 | }, { 14 | id:2, 15 | name: "Swim", 16 | likes:3 17 | },{ 18 | id:4, 19 | name: "Volleyball", 20 | likes:10 21 | },{ 22 | id:5, 23 | name:"Wrestle", 24 | likes:20 25 | }]; 26 | 27 | $scope.selectedSport = { 28 | }; 29 | 30 | $scope.sportChanged = function(selectedSport){ 31 | $scope.selectedSport = selectedSport; 32 | } 33 | }); 34 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |

10 |

11 | {{selectedSport}} 12 |

13 | 14 | 20 | 21 |

22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Angular FancySelect 2 | 3 | Customized html dropdown directive for AngularJS. 4 | 5 | Using font awesome for awesome icon. 6 | 7 | No other dependency required. 8 | 9 | See examples: https://codexman0.github.io/angular-fancy-select/ 10 | 11 | ## Usage 12 | 13 | Include `fancyselect` in your module dependencies: 14 | 15 | ```js 16 | var app = angular.module("fancySelectExample", ['fancyselect']); 17 | ``` 18 | 19 | In your controller, setup the select options and object to hold the selected value: 20 | 21 | ```js 22 | var app = angular.module("fancySelectExample", ['fancyselect']); 23 | 24 | app.controller("MyController", function($scope) { 25 | $scope.sportsList = [{ 26 | id : 0, 27 | name: "Volleyball", 28 | likes: 5 29 | }, { 30 | id: 1, 31 | name: "Tennis", 32 | likes:6 33 | 34 | }, { 35 | id:2, 36 | name: "Swim", 37 | likes:3 38 | },{ 39 | id:4, 40 | name: "Volleyball", 41 | likes:10 42 | },{ 43 | id:5, 44 | name:"Wrestle", 45 | likes:20 46 | }]; 47 | 48 | $scope.selectedSport = { 49 | }; 50 | 51 | $scope.sportChanged = function(selectedSport){ 52 | $scope.selectedSport = selectedSport; 53 | } 54 | }); 55 | ``` 56 | 57 | ```html 58 | 59 |

60 |

61 | {{selectedSport}} 62 |

63 | 64 | 70 | 71 |

72 | 73 | ``` 74 | 75 | ## Developing 76 | 77 | Pull requests are welcome! 78 | 79 | -------------------------------------------------------------------------------- /dist/fancyselect.js: -------------------------------------------------------------------------------- 1 | var app = angular.module("fancyselect", []); 2 | 3 | /** 4 | * fancyselect 5 | * angular custom directive 6 | * @params 7 | * label: is the placeholder in the initial state 8 | * dataset: is the json that the directive loops through. 9 | * model: indicates currently selected item in json. 10 | * uniqueKey : the key that is to identify the item in json. 11 | * displayKey: the key that 12 | * onChange: event handler that is fired when new item is selected in dropdown 13 | */ 14 | app.directive("fancyselect", ['$rootScope','$parse',function($rootScope,$parse) { 15 | return { 16 | restrict: "E", 17 | templateUrl: "./dist/fancyselect.templ.html", 18 | scope: { 19 | label: "@", 20 | dataset: "=", 21 | model: "=", 22 | uniqueKey: "@", 23 | displayKey: "@", 24 | onChange: "&" 25 | }, 26 | link: function(scope,element,attrs) { 27 | 28 | // initialize the local scope variables 29 | scope.bShowList = false; 30 | scope.bShowLabel = true; 31 | scope.selectedItem = angular.copy(scope.model); 32 | 33 | // when you select the item in the list 34 | scope.selectItem = function(item) { 35 | scope.bShowLabel = false; 36 | scope.selectedItem = item; 37 | }; 38 | 39 | // a function to check the item in the loop is currently selected item and returns true/false 40 | scope.isSelectedItem = function(item) { 41 | return item[scope.uniqueKey] === scope.selectedItem[scope.uniqueKey]; 42 | }; 43 | 44 | // a function to show/hide the body of dropdown 45 | scope.toggleList = function() { 46 | scope.bShowList = !scope.bShowList; 47 | }; 48 | 49 | // a function that detects the mouse click and decide to collapse the dropdown. 50 | angular.element(document).on("click", function(e) { 51 | var target = angular.element(e.target); 52 | if (!$(target[0]).is(".fancyselect-display.clicked") && !$(target[0]).parents(".fancyselect-display.clicked").length > 0) { 53 | scope.$apply(function () { 54 | scope.bShowList = false; 55 | }); 56 | } 57 | }); 58 | 59 | // this watcher calls the callback in the parent controller with the newly changed model. 60 | scope.$watch("selectedItem", function(value) { 61 | scope.bShowLabel = scope.selectedItem[scope.uniqueKey] === undefined; 62 | scope.selectedValue = scope.selectedItem[scope.displayKey]; 63 | $parse(attrs.onChange)(scope.$parent, {selected: scope.selectedItem }); 64 | }); 65 | } 66 | } 67 | }]); 68 | -------------------------------------------------------------------------------- /dist/fancyselect.css: -------------------------------------------------------------------------------- 1 | .fancyselect-app { 2 | margin: 50px 0 0 50px; 3 | } 4 | 5 | fancyselect { 6 | float: left; 7 | display: block; 8 | width: 300px; 9 | } 10 | 11 | fancyselect > div { 12 | float: left; 13 | width: 100%; 14 | } 15 | 16 | fancyselect > div > div.fancyselect-display { 17 | float: left; 18 | width: 100%; 19 | background: white; 20 | height: 40px; 21 | cursor: pointer; 22 | border: solid 1px #aaaaaa; 23 | box-sizing: border-box; 24 | } 25 | fancyselect > div > div.fancyselect-display > * { 26 | float: left; 27 | height: 100%; 28 | height: 40px; 29 | line-height: 40px !important; 30 | display: inline-block; 31 | vertical-align: middle; 32 | } 33 | fancyselect > div > div.fancyselect-display > span { 34 | font-size: 14px; 35 | width: 100%; 36 | position: relative; 37 | box-sizing: border-box; 38 | padding-right: 34px; 39 | padding-left: 10px; 40 | } 41 | fancyselect > div > div.fancyselect-display > span.label { 42 | color: #cccccc; 43 | } 44 | fancyselect > div > div.fancyselect-display > i { 45 | position: relative; 46 | width: 14px; 47 | margin-left: -24px; 48 | font-size: 1.125em; 49 | font-weight: bold; 50 | padding-right: 10px; 51 | text-align: right; 52 | } 53 | fancyselect > div > div.fancyselect-body { 54 | float: left; 55 | position: relative; 56 | width: 100%; 57 | display:none; 58 | /*transform: scale(1, 0); 59 | ms-transform: scale(1, 0); 60 | transition: transform ease 250ms;*/ 61 | } 62 | fancyselect > div > div.fancyselect-body > div { 63 | position: absolute; 64 | width: 100%; 65 | z-index: 2; 66 | cursor: pointer; 67 | background: white; 68 | } 69 | fancyselect > div > div.fancyselect-body > div > div { 70 | float: left; 71 | width: 100%; 72 | padding: 0 10px; 73 | font-size: 14px; 74 | box-sizing: border-box; 75 | border: solid 1px #cccccc; 76 | border-top: none; 77 | } 78 | fancyselect > div > div.fancyselect-body > div > div:hover { 79 | background: #F0F0F0; 80 | } 81 | fancyselect > div > div.fancyselect-body > div > div.selected { 82 | background: #99d9ea; 83 | color: white; 84 | } 85 | fancyselect > div > div.fancyselect-body > div > div > * { 86 | height: 40px; 87 | line-height: 40px !important; 88 | display: inline-block; 89 | vertical-align: middle; 90 | } 91 | fancyselect > div > div.fancyselect-body > div > div > span { 92 | float: left; 93 | width: 100%; 94 | position: relative; 95 | padding-right: 30px; 96 | box-sizing: border-box; 97 | color: inherit; 98 | } 99 | fancyselect > div > div.fancyselect-body > div > div > i { 100 | float: left; 101 | width: 20px; 102 | margin-left: -20px; 103 | display: none; 104 | } 105 | fancyselect > div > div.fancyselect-body > div > div.selected > i { 106 | display: inline-block; 107 | } 108 | fancyselect > div.show > div.fancyselect-body { 109 | display: block; 110 | /*transform: scale(1, 1); 111 | ms-transform: scale(1, 1);*/ 112 | } 113 | --------------------------------------------------------------------------------