Angular Responsive Select Box

In this example below you will see how to do a Angular Responsive Select Box with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by derekshull, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright derekshull ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Angular Responsive Select Box</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div ng-app="app" ng-controller="SelectCtrl">
  <section class="ngSelect" ng-click="loadOptions()">
    <div>Google</div>
    <div>Microsoft</div>
    <div>Apple</div>
    <div>Sony</div>
    <div>Yahoo</div>
  </section>
</div>

&#709;
  <script src='http://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/derekshull/angular-responsive-select-box-hFofx */
.ngSelect {
  border:1px solid black;
  display:inline-block;
  padding:5px 25px 5px 10px;
}

.ngSelect > div {
  display:none;
}

.ngSelect > div:first-of-type {
  display:block;
}

/*Downloaded from https://www.codeseek.co/derekshull/angular-responsive-select-box-hFofx */
var app = angular.module("app", []);

app.controller("SelectCtrl", ["$scope", function($scope) {
  $scope.loadOptions = function(e) {
    alert("hello");
  };
}]);

Comments