Select2 directive

by Kushal Jayswal

HTML

<script src="https://code.angularjs.org/1.2.20/angular.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css">
<div ng-app="miniapp" ng-controller="Ctrl">
  <select ng-model="selectedOption" select2 data-url="https://jsonplaceholder.typicode.com/users/" data-placeholder="Select OPT" data-min-chars="1" data-delay="300">
    <option ng-repeat="(k, v) in optionList" value="{{k}}">{{v}}</option>

  </select>
  
  <select ng-model="selectedOption1" select2 data-placeholder="Select OPT 2" data-min-chars="1">
  <option></option>
    <option ng-repeat="(k, v) in optionList" value="{{k}}">{{v}}</option>

  </select>
  <button ng-click="changeModelOutside()">Click me</button>
</div>

CSS

select {
  width: 200px;
}

JavaScript

var $scope;
var app = angular.module('miniapp', []);

app.directive('select2', function() {
  return {
    restrict: 'A',
    scope: {
      'url': '@',
      'placeholder': '@',
      'minChars': '@',
      'delay': '@',
      'ngModel': '=',
    },
    link: function(scope, element, attrs) {
      var ifCustomSearch = $(element).attr('data-url');
      if (ifCustomSearch) {
        element.select2({
          placeholder: scope.placeholder,
          minimumInputLength: scope.minChars,
          ajax: {
            delay: scope.delay,
            url: scope.url,
            data: function(user) {
              return {
                id: user.term
              };
            },
            processResults: function(user) {
              return {
                results: user
              };
            }
          }
        });
      } else {
        element.select2({
          placeholder: scope.placeholder
        });
      }
    }
  };
});

function formatCity(user) {

  var markup;
  if (user.id) {
    markup = user.id;
  }
  return markup;
}

function formatCitySelection(user) {
  return user.name;
}

function Ctrl($scope) {
  $scope.optionList = {
    'key1': 'Option 1',
    'key2': 'Option 2',
    'key3': 'Option 3',
    'key4': 'Option 4'
  };


}