Select2 Box with Angular

Select Boxes with Angular

Examples

Single Select Box

selected - {{selected}}

Code Snippet - HTML

        
          
          

selected - {{selected}}

Code Snippet - JavaScript

        
          $('#mySingleSelect').select2({
           placeholder: 'Select a Name...',
           formatNoMatches: function() { return 'No Matches Found for your Search'; }
          });

          var angApp = angular.module('myApp',[]);
          angApp.controller('appCtrl', ['$scope', function($scope){
            $scope.collection = [
              {name:'Scott'},
              {name:'Steve'},
              {name:'Nick'},
              {name:'Asha'},
              {name:'Vishak'},
              {name:'Joel'},
              {name:'Ralph'},
              {name:'Marq'},
              {name:'Michele'},
              {name:'Kiavash'}
            ];
          }]);
        
      

Multi Select Box



selected people - {{selectedPeople}}

Code Snippet - HTML

        
          

selected people - {{selectedPeople}}

Code Snippet - JavaScript

        
          $('#myMultiSelect').select2({
           placeholder: 'Select a Name...',
           formatNoMatches: function() { return 'No Matches Found for your Search'; }
          });
        
      

Multi Select Box with Tagging

Allows User to Enter a New Entry

Code Snippet - HTML

      
        

Code Snippet - JavaScript

      
        angular.module('myApp').controller('taggingCtrl', function($scope){
          $('#select').select2({
            tags: $scope.collection.map(function(personObject){ return personObject.name; })
          });
        });