Tag-Input - Angular 1.5.5

Directive playground

by Annie Lagang

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>
<div ng-app='tag-input'>
  <h1>AngularJS Tag-Input Test</h1>
  <div ng-controller='FormCtrl'>
    <label>Default without initial content</label>
    <tag-input taglist='listone'></tag-input>
    <br>
    <label>With placeholder and inital content</label>
    <tag-input placeholder='add a tag' taglist='listtwo'></tag-input>
    <!--<br>
    <label>With autocomplete from defined source</label>
    <tag-input autocomplete='users' taglist='listthree'></tag-input>-->
  </div>
</div>

CSS

.tag-input-ctn {
  border: 1px solid #ccc;
  padding: 2px 3px;
  display: inline-block;
  width: 500px;
  border-radius: 3px;
  box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.075);
}
.tag-input-ctn input {
  display: inline-block;
  float: left;
  height: 18px;
  padding: 0px;
  font-size: 13px;
  line-height: 18px;
  color: black;
  border: 0px;
  margin: 2px;
}
.tag-input-ctn input:focus {
  outline: 0;
  box-shadow: 0px;
}
.tag-input-ctn .input-tag {
  padding: 2px 4px;
  line-height: 12px;
  font-size: 11px;
  background-color: #e3eaf6;
  display: inline-block;
  float: left;
  border-radius: 2px;
  margin: 2px 5px 2px 0px;
  border: 1px solid #a9b6d2;
}
.tag-input-ctn .input-tag .delete-tag {
  display: inline-block;
  font-size: 12px;
  cursor: pointer;
  padding: 0px 2px;
}
.tag-input-ctn .input-tag .delete-tag:hover {
  background-color: #96b4d2;
}

JavaScript

// autocomplete not working
(function() {
  var testApp;

  testApp = angular.module('tag-input', []);

  testApp.controller('FormCtrl', function($scope) {
    $scope.listone = "";
    $scope.listtwo = "one,two,three";
    $scope.listthree = "";
    return $scope.users = ["Max", "Tim", "Bernd", "Angela"];
  });

  testApp.directive('tagInput', function() {
    return {
      restrict: 'E',
      scope: {
        inputTags: '=taglist',
        autocomplete: '=autocomplete'
      },
      link: function($scope, element, attrs) {
        $scope.defaultWidth = 200;
        $scope.tagText = '';
        $scope.placeholder = attrs.placeholder;
        /*if ($scope.autocomplete) {
          $scope.autocompleteFocus = function(event, ui) {
            $(element).find('input').val(ui.item.value);
            return false;
          };
          $scope.autocompleteSelect = function(event, ui) {
            $scope.$apply(`tagText='${ui.item.value}'`);
            $scope.$apply('addTag()');
            return false;
          };
          $(element).find('input').autocomplete({
            minLength: 0,
            source: function(request, response) {
              var item;
              return response((function() {
                var i, len, ref, results;
                ref = $scope.autocomplete;
                results = [];
                for (i = 0, len = ref.length; i < len; i++) {if (window.CP.shouldStopExecution(1)){break;}
                  item = ref[i];
                  if (item.toLowerCase().indexOf(request.term.toLowerCase()) !== -1) {
                    results.push(item);
                  }
                }
window.CP.exitedLoop(1);

                return results;
              })());
            },
            focus: (event, ui) => {
              return $scope.autocompleteFocus(event, ui);
            },
            select: (event, ui) => {
              return $scope.autocompleteSelect(event, ui);
            }
          });
        }*/
       ...