Dropdown

by Aides

HTML

<div ng-app="app">
  <div ng-controller="testCtrl as test">
    <drop-down selected-item="test.selectedItem" items="test.items">
      
    </drop-down>
  </div>
</div>

JavaScript

angular.module('app', [])
  .controller('testCtrl', ['$scope', function($scope) {
  	var self = this;
    
    this.items = ['foo', 'bar', 'foobar'];
    this.selectedItem = this.items[0];
  }])
  .directive('dropDown', ['$interval', function($interval) {
  	return {
    	restrict: 'E',
      scope: {
      	items: '=',
        selectedItem: '='
      },
      template: `
      	<div ng-class="{open: open}">
        	<div ng-click="dropdownToggle()">
          	<p ng-bind="selectedItem"></p>
          </div>
          <ul ng-show="open" class="ng-hide">
          	<li ng-repeat="item in items" ng-click="select(item)">
            	<p ng-bind="item"></p>
            </li>
          </ul>
        </div>
      `,
      link: function(scope, element, attrs, controller, transclude)
      {
      	scope.open = false;
        
        scope.dropdownToggle = function()
        {
        	scope.open = !scope.open;
        }
        
        scope.select = function(item)
        {
        	scope.selectedItem = item;
          scope.open = false;
        }
      }
    }
  }]);