Drop Down

Usage
Create a div tag in html file with specific id for example plainDropDown,dropArea,dropAreaUP,dropAreaHeader and write a specific function in javascript file to perform your business logic. An sample example as shown below:

HTML file:
<div id="dropdown" ng-init="init()"></div>
<div id="plainDropDown" ></div>
<div id="dropArea" ></div>
<div id="dropAreaUP" ></div>
<div id="dropAreaHeader" ></div>

Javascript file:

        var data ={"dropped_down_data" :{"title":"DropDown","position":"down", "items":[{"itemLabel": "Node JS"},{"itemLabel": "JS"}]},"dropped_up_data" :{"title":"DropUp","position":"up", "items":[{"itemLabel": "PHP"},{"itemLabel": "ASP"}]},"dropHeader_data" :{"title":"DropHeader","position":"down","items":[{"itemLabel": "Web UI", "isheader":true},{"itemLabel": "HTML", "isheader":false},{"itemLabel": "CSS", "isheader":false},{"itemLabel": "JS", "isheader":false},{"itemLabel": "Programming", "isheader":true},{"itemLabel": "C", "isheader":false},{"itemLabel": "C++", "isheader":false}]},"dropSimple_data" : {"title":"--PleaseSelect--","items":[{"itemLabel": "Cameras"},{"itemLabel": "Mobile Phones"},{"itemLabel": "Computers"},{"itemLabel": "Monitors"},{"itemLabel": "Tablets"},{"itemLabel": "Others"}]}};

        $scope.init = function() {
               loadDrop();
        }

         function loadDrop() {
            var drop_tpl = $(modelTemplate).filter('#dropDown').html();
            var dropHeader_tpl = $(modelTemplate).filter('#dropDownHeader').html();
            var dropSimple_tpl = $(modelTemplate).filter('#simpleDropdownTmpl').html();

            var html = Mustache.to_html(drop_tpl, data.dropped_down_data);
            $('#dropArea').html(html);

            var html = Mustache.to_html(drop_tpl, data.dropped_up_data);
            $('#dropAreaUP').html(html);

            var html = Mustache.to_html(dropHeader_tpl, data.dropHeader_data);
            $('#dropAreaHeader').html(html);

            var html = Mustache.to_html(dropSimple_tpl, data.dropSimple_data);
            $('#plainDropDown').html(html);

        }