Tutorial 28 - Angularjs listbox example

Angularjs listbox example

This sample will help you know about using combobox via AngularJS. Ok we will answer two questions blow:

How to binding data to listbox?
How to get seclected value of listbox?

 <html>  
 <head>  
   <title>AngularJS combobox</title>  
   <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>  
   <script>  
 var app = angular.module('myapp', []);  
 app.controller('ctrlMonth', function($scope) {  
  $scope.months = ['January','February','March','April','May','June','July','August','September','October','November','December'];  
 });  
   </script>  
   <style>  
     body {  
       background-color: #000;  
       font-family: Arial, sans-serif;  
       color: #fff;  
     }  
     .sample {  
       width: 400px;  
       margin: 0 auto;  
       border: 1px solid #aaa;  
       padding: 20px;  
       margin-top: 20px;  
     }  
   </style>  
 </head>  
 <body ng-app="myapp">  
   <div class="sample" align="center" ng-controller="ctrlMonth">  
     <h1>AngularJS Listbox example</h1>  
     <select style="width: 100%;" size="7" ng-model="currentItems" multiple  
         ng-multiple="true"  
         ng-options="opt as opt for opt in months"></select>  
     <h3>You have selected: {{currentItems}}</h3>  
   </div>  
 </body>  
 </html>