var app = angular.module('plunker', ['ngTagsInput']);
app.controller('MainCtrl', function($scope, $http) {
$scope.tags = [
{ text: 'Tag1', id: 1 },
{ text: 'Tag2', id: 2 },
{ text: 'Tag3', id: 3 }
];
$scope.loadTags = function(query) {
return $http.get('tags.json');
};
$scope.onTagAdded = function($tag) {
var currentId = 0;
if ($scope.tags.length > 1) {
var previousTagIdx = $scope.tags.indexOf($tag) - 1;
var previousTag = $scope.tags[previousTagIdx];
currentId = previousTag.id + 1;
}
$tag.id = currentId;
}
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="ng-tags-input.min.css" />
<script src="https://code.angularjs.org/1.4.2/angular.js"></script>
<script src="ng-tags-input.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<tags-input ng-model="tags" add-on-enter="true" allow-dblclick-to-edit="true"
min-length="0"
display-property="text"
key-property="id"
on-tag-added="onTagAdded($tag)"
input-split-pattern="\s|," >
<auto-complete source="loadTags($query)"></auto-complete>
</tags-input>
</body>
</html>
/* Put your css in here */
/*! ngTagsInput v3.2.0 License: MIT */
!function(a){"use strict";function b(a,b,c,d,e,f,g){"ngInject";function h(a,b,c,e){var g={},h=function(b){return f.safeToString(b[a.displayProperty])},i=function(b,c){b[a.displayProperty]=c},j=function(b){var e=h(b),i=e&&e.length>=a.minLength&&e.length<=a.maxLength&&a.allowedTagsPattern.test(e)&&!f.findInObjectArray(g.items,b,a.keyProperty||a.displayProperty);return d.when(i&&c({$tag:b})).then(f.promisifyValue)},k=function(a){return d.when(e({$tag:a})).then(f.promisifyValue)};return g.items=[],g.addText=function(a){var b={};return i(b,a),g.add(b)},g.addTextArr=function(a){a.forEach(function(a){return g.addText(a)})},g.add=function(c){var d=h(c);return a.replaceSpacesWithDashes&&(d=f.replaceSpacesWithDashes(d)),i(c,d),j(c).then(function(){g.items.push(c),b.trigger("tag-added",{$tag:c})}).catch(function(){d&&b.trigger("invalid-tag",{$tag:c})})},g.remove=function(a){var c=g.items[a];return k(c).then(function(){return g.items.splice(a,1),g.clearSelection(),b.trigger("tag-removed",{$tag:c}),c})},g.select=function(a){a<0?a=g.items.length-1:a>=g.items.length&&(a=0),g.index=a,g.selected=g.items[a]},g.selectPrior=function(){g.select(--g.index)},g.selectNext=function(){g.select(++g.index)},g.removeSelected=function(){return g.remove(g.index)},g.clearSelection=function(){g.selected=null,g.index=-1},g.getItems=function(){return a.useStrings?g.items.map(h):g.items},g.clearSelection(),g}function i(a){return-1!==g.SUPPORTED_INPUT_TYPES.indexOf(a)}return{restrict:"E",require:"ngModel",scope:{tags:"=ngModel",text:"=?",templateScope:"=?",tagClass:"&",onTagAdding:"&",onTagAdded:"&",onInvalidTag:"&",onTagRemoving:"&",onTagRemoved:"&",onTagClicked:"&"},replace:!1,transclude:!0,templateUrl:"ngTagsInput/tags-input.html",controller:["$scope","$element","$attrs",function(a,b,c){a.events=f.simplePubSub(),a.options=e.load("tagsInput",b,c,a.events,{template:[String,"ngTagsInput/tag-item.html"],type:[String,"text",i],placeholder:[String,"Add a tag"],tabindex:[Number,null],removeTagSymbol:[String,String.fromCharCode(215)],replaceSpacesWithDashes:[Boolean,!0],minLength:[Number,3],maxLength:[Number,g.MAX_SAFE_INTEGER],addOnEnter:[Boolean,!0],addOnSpace:[Boolean,!1],addOnComma:[Boolean,!0],addOnBlur:[Boolean,!0],addOnPaste:[Boolean,!1],pasteSplitPattern:[RegExp,/,/],allowedTagsPattern:[RegExp,/.+/],enableEditingLastTag:[Boolean,!1],minTags:[Number,0],maxTags:[Number,g.MAX_SAFE_INTEGER],displayProperty:[String,"text"],keyProperty:[String,""],allowLeftoverText:[Boolean,!1],addFromAutocompleteOnly:[Boolean,!1],spellcheck:[Boolean,!0],allowDblclickToEdit:[Boolean,!1],inputSplitPattern:[RegExp,null],useStrings:[Boolean,!1]}),a.tagList=new h(a.options,a.events,f.handleUndefinedResult(a.onTagAdding,!0),f.handleUndefinedResult(a.onTagRemoving,!0)),this.registerAutocomplete=function(){return{addTag:function(b){return a.tagList.add(b)},getTags:function(){return a.tagList.items},getCurrentTagText:function(){return a.newTag.text()},getOptions:function(){return a.options},getTemplateScope:function(){return a.templateScope},on:function(b,c){return a.events.on(b,c,!0),this}}},this.registerTagItem=function(){return{getOptions:function(){return a.options},removeTag:function(b){a.disabled||a.tagList.remove(b)}}}}],link:function(d,e,h,i){var j=[g.KEYS.enter,g.KEYS.comma,g.KEYS.space,g.KEYS.backspace,g.KEYS.delete,g.KEYS.left,g.KEYS.right],k=d.tagList,l=d.events,m=d.options,o=e.find("input"),p=["minTags","maxTags","allowLeftoverText"],q=function(){i.$setValidity("maxTags",k.items.length<=m.maxTags),i.$setValidity("minTags",k.items.length>=m.minTags),i.$setValidity("leftoverText",!(!d.hasFocus&&!m.allowLeftoverText)||!d.newTag.text())},r=function(){a(function(){o[0].focus()})};i.$isEmpty=function(a){return!a||!a.length},d.isEditing=!1,d.editingTag={text:function(a){if(!angular.isDefined(a))return d.editingText||"";d.editingText=a,l.trigger("edit-input-change",a)},invalid:null},d.newTag={text:function(a){if(!angular.isDefined(a))return d.text||"";d.text=a,l.trigger("input-change",a)},invalid:null},d.track=function(a){return a[m.keyProperty||m.displayProperty]},d.getTagClass=function(a,b){var c=a===k.selected;return[d.tagClass({$tag:a,$index:b,$selected:c}),{selected:c}]},d.$watch("tags",function(a){if(a){if(k.items=f.makeObjectArray(a,m.displayProperty),m.useStrings)return;d.tags=k.items}else k.items=[]}),d.$watch("tags.length",function(){q(),i.$validate()}),h.$observe("disabled",function(a){d.disabled=a}),d.eventHandlers={input:{keydown:function(a){l.trigger("input-keydown",a)},focus:function(){d.hasFocus||(d.hasFocus=!0,l.trigger("input-focus"))},blur:function(){a(function(){var a=b.prop("activeElement"),c=a===o[0],f=e[0].contains(a);!c&&f||(d.hasFocus=!1,l.trigger("input-blur"))})},editBlur:function(a,b){l.trigger("edit-input-blur",b)},paste:function(a){a.getTextData=function(){var b=a.clipboardData||a.originalEvent&&a.originalEvent.clipboardData;return b?b.getData("text/plain"):c.clipboardData.getData("Text")},l.trigger("input-paste",a)}},host:{click:function(){d.disabled||r()}},tag:{click:function(a){l.trigger("tag-clicked",{$tag:a})},dblclick:function(a){l.trigger("tag-dblclicked",a)}}},l.on("tag-added",d.onTagAdded).on("invalid-tag",d.onInvalidTag).on("tag-removed",d.onTagRemoved).on("tag-clicked",d.onTagClicked).on("tag-dblclicked",function(a){m.allowDblclickToEdit&&(d.editingTag.text(a.text),a.editable=!0,d.isEditing=!0)}).on("tag-added",function(){d.newTag.text("")}).on("tag-added tag-removed",function(){d.tags=k.getItems(),i.$setDirty(),r()}).on("invalid-tag",function(){d.newTag.invalid=!0}).on("option-change",function(a){-1!==p.indexOf(a.name)&&q()}).on("input-change",function(){k.clearSelection(),d.newTag.invalid=null}).on("input-focus",function(){e.triggerHandler("focus"),i.$setValidity("leftoverText",!0)}).on("input-blur",function(){if(m.addOnBlur&&!m.addFromAutocompleteOnly){var a=d.newTag.text().split(m.inputSplitPattern);k.addTextArr(a)}e.triggerHandler("blur"),q()}).on("edit-input-blur",function(a){var b=d.editingTag.text(),c=b.split(m.inputSplitPattern),e=c.shift();a.text=e,k.addTextArr(c),a.editable=!1,d.isEditing=!1,r()}).on("edit-input-change",function(){k.clearSelection(),d.editingTag.invalid=null}).on("input-keydown",function(a){var b,c=a.keyCode;if(!f.isModifierOn(a)&&-1!==j.indexOf(c)){var h=(b={},n(b,g.KEYS.enter,m.addOnEnter),n(b,g.KEYS.comma,m.addOnComma),n(b,g.KEYS.space,m.addOnSpace),b),i=!m.addFromAutocompleteOnly&&h[c],l=(c===g.KEYS.backspace||c===g.KEYS.delete)&&k.selected,o=c===g.KEYS.backspace&&0===d.newTag.text().length&&m.enableEditingLastTag&&!d.isEditing,p=(c===g.KEYS.backspace||c===g.KEYS.left||c===g.KEYS.right)&&0===d.newTag.text().length&&!m.enableEditingLastTag;if(i){if(d.isEditing)return void e.find("input")[0].blur();var q=d.newTag.text().split(m.inputSplitPattern);k.addTextArr(q)}else o?(k.selectPrior(),k.removeSelected().then(function(a){a&&d.newTag.text(a[m.displayProperty])})):l?k.removeSelected():p&&(c===g.KEYS.left||c===g.KEYS.backspace?k.selectPrior():c===g.KEYS.right&&k.selectNext());(i||p||l||o)&&a.preventDefault()}}).on("input-paste",function(a){if(m.addOnPaste){var b=a.getTextData(),c=b.split(m.pasteSplitPattern);c.length>1&&(k.addTextArr(c),a.preventDefault())}})}}}function c(a){"ngInject";return{restrict:"E",require:"^tagsInput",template:'<ng-include src="$$template"></ng-include>',scope:{$scope:"=scope",data:"="},link:function(b,c,d,e){var f=e.registerTagItem(),g=f.getOptions();b.$$template=g.template,b.$$removeTagSymbol=g.removeTagSymbol,b.$getDisplayText=function(){return a.safeToString(b.data[g.displayProperty])},b.$removeTag=function(){f.removeTag(b.$index)},b.$watch("$parent.$index",function(a){b.$index=a})}}}function d(a,b,c,d,e,f,g){"ngInject";function h(a,b,c){var e={},g=null,h=function(){return b.tagsInput.keyProperty||b.tagsInput.displayProperty},i=function(a,c){return a.filter(function(a){return!f.findInObjectArray(c,a,h(),function(a,c){return b.tagsInput.replaceSpacesWithDashes&&(a=f.replaceSpacesWithDashes(a),c=f.replaceSpacesWithDashes(c)),f.defaultComparer(a,c)})})};return e.reset=function(){g=null,e.items=[],e.visible=!1,e.index=-1,e.selected=null,e.query=null},e.show=function(){b.selectFirstMatch?e.select(0):e.selected=null,e.visible=!0},e.load=f.debounce(function(c,j){e.query=c;var k=d.when(a({$query:c}));g=k,k.then(function(a){k===g&&(a=f.makeObjectArray(a.data||a,h()),a=i(a,j),e.items=a.slice(0,b.maxResultsToShow),e.items.length>0?e.show():e.reset())})},b.debounceDelay),e.selectNext=function(){e.select(++e.index)},e.selectPrior=function(){e.select(--e.index)},e.select=function(a){a<0?a=e.items.length-1:a>=e.items.length&&(a=0),e.index=a,e.selected=e.items[a],c.trigger("suggestion-selected",a)},e.reset(),e}function i(a,b){var c=a.find("li").eq(b),d=c.parent(),e=c.prop("offsetTop"),f=c.prop("offsetHeight"),g=d.prop("clientHeight"),h=d.prop("scrollTop");e<h?d.prop("scrollTop",e):e+f>g+h&&d.prop("scrollTop",e+f-g)}return{restrict:"E",require:"^tagsInput",scope:{source:"&",matchClass:"&"},templateUrl:"ngTagsInput/auto-complete.html",controller:["$scope","$element","$attrs",function(a,b,c){a.events=f.simplePubSub(),a.options=e.load("autoComplete",b,c,a.events,{template:[String,"ngTagsInput/auto-complete-match.html"],debounceDelay:[Number,100],minLength:[Number,3],highlightMatchedText:[Boolean,!0],maxResultsToShow:[Number,10],loadOnDownArrow:[Boolean,!1],loadOnEmpty:[Boolean,!1],loadOnFocus:[Boolean,!1],selectFirstMatch:[Boolean,!0],displayProperty:[String,""]}),a.suggestionList=new h(a.source,a.options,a.events),this.registerAutocompleteMatch=function(){return{getOptions:function(){return a.options},getQuery:function(){return a.suggestionList.query}}}}],link:function(a,b,c,d){var e=[g.KEYS.enter,g.KEYS.tab,g.KEYS.escape,g.KEYS.up,g.KEYS.down],h=a.suggestionList,j=d.registerAutocomplete(),k=a.options,l=a.events;k.tagsInput=j.getOptions();var m=function(a){return a&&a.length>=k.minLength||!a&&k.loadOnEmpty};a.templateScope=j.getTemplateScope(),a.addSuggestionByIndex=function(b){h.select(b),a.addSuggestion()},a.addSuggestion=function(){var a=!1;return h.selected&&(j.addTag(angular.copy(h.selected)),h.reset(),a=!0),a},a.track=function(a){return a[k.tagsInput.keyProperty||k.tagsInput.displayProperty]},a.getSuggestionClass=function(b,c){var d=b===h.selected;return[a.matchClass({$match:b,$index:c,$selected:d}),{selected:d}]},j.on("tag-added tag-removed invalid-tag input-blur",function(){h.reset()}).on("input-change",function(a){m(a)?h.load(a,j.getTags()):h.reset()}).on("input-focus",function(){var a=j.getCurrentTagText();k.loadOnFocus&&m(a)&&h.load(a,j.getTags())}).on("input-keydown",function(b){var c=b.keyCode,d=!1;if(!f.isModifierOn(b)&&-1!==e.indexOf(c))return h.visible?c===g.KEYS.down?(h.selectNext(),d=!0):c===g.KEYS.up?(h.selectPrior(),d=!0):c===g.KEYS.escape?(h.reset(),d=!0):c!==g.KEYS.enter&&c!==g.KEYS.tab||(d=a.addSuggestion()):c===g.KEYS.down&&a.options.loadOnDownArrow&&(h.load(j.getCurrentTagText(),j.getTags()),d=!0),d?(b.preventDefault(),b.stopImmediatePropagation(),!1):void 0}),l.on("suggestion-selected",function(a){i(b,a)})}}}function e(a,b){"ngInject";return{restrict:"E",require:"^autoComplete",template:'<ng-include src="$$template"></ng-include>',scope:{$scope:"=scope",data:"="},link:function(c,d,e,f){var g=f.registerAutocompleteMatch(),h=g.getOptions();c.$$template=h.template,c.$index=c.$parent.$index,c.$highlight=function(c){return h.highlightMatchedText&&(c=b.safeHighlight(c,g.getQuery())),a.trustAsHtml(c)},c.$getDisplayText=function(){return b.safeToString(c.data[h.displayProperty||h.tagsInput.displayProperty])}}}}function f(a){"ngInject";return{restrict:"A",require:"ngModel",link:function(b,c,d,e){var f=a.getTextAutosizeThreshold(),g=angular.element('<span class="input"></span>');g.css("display","none").css("visibility","hidden").css("width","auto").css("white-space","pre"),c.parent().append(g);var h=function(a){var b=a,e=void 0;return angular.isString(b)&&0===b.length&&(b=d.placeholder),b&&(g.text(b),g.css("display",""),e=g.prop("offsetWidth"),g.css("display","none")),c.css("width",e?e+f+"px":""),a};e.$parsers.unshift(h),e.$formatters.unshift(h),d.$observe("placeholder",function(a){e.$modelValue||h(a)})}}}function g(){return function(a,b,c){a.$watch(c.tiBindAttrs,function(a){angular.forEach(a,function(a,b){c.$set(b,a)})},!0)}}function h(a,b){"ngInject";return{scope:{},link:function(c,d,e){c.selectAll=!1;var f=b(e.tiSelectall),g=function(){a(function(){d[0].focus(),d[0].select()})};c.$watch(f,function(a){!0===a&&g(),c.selectAll=a})}}}function i(){return function(a,b,c,d,e){e(function(a){b.append(a)})}}function j(){"ngInject";var a=this,b={},c={},d=3;this.setDefaults=function(c,d){return b[c]=d,a},this.setActiveInterpolation=function(b,d){return c[b]=d,a},this.setTextAutosizeThreshold=function(b){return d=b,a},this.$get=["$interpolate",function(a){var e,f=(e={},n(e,String,function(a){return a.toString()}),n(e,Number,function(a){return parseInt(a,10)}),n(e,Boolean,function(a){return"true"===a.toLowerCase()}),n(e,RegExp,function(a){return new RegExp(a)}),e);return{load:function(d,e,g,h,i){var j=function(){return!0},k={};return angular.forEach(i,function(i,l){var m=i[0],n=i[1],o=i[2]||j,p=f[m],q=function(){var a=b[d]&&b[d][l];return angular.isDefined(a)?a:n},r=function(a){k[l]=a&&o(a)?p(a):q()};c[d]&&c[d][l]?g.$observe(l,function(a){r(a),h.trigger("option-change",{name:l,newValue:a})}):r(g[l]&&a(g[l])(e.scope()))}),k},getTextAutosizeThreshold:function(){return d}}}]}function k(a,b){"ngInject";var c={};return c.debounce=function(b,c){var d=void 0;return function(){for(var e=arguments.length,f=Array(e),g=0;g<e;g++)f[g]=arguments[g];a.cancel(d),d=a(function(){b.apply(null,f)},c)}},c.makeObjectArray=function(a,b){return!angular.isArray(a)||0===a.length||angular.isObject(a[0])?a:a.map(function(a){return n({},b,a)})},c.findInObjectArray=function(a,b,d,e){var f=null;return e=e||c.defaultComparer,a.some(function(a){if(e(a[d],b[d]))return f=a,!0}),f},c.defaultComparer=function(a,b){return c.safeToString(a).toLowerCase()===c.safeToString(b).toLowerCase()},c.safeHighlight=function(a,b){if(a=c.encodeHTML(a),!(b=c.encodeHTML(b)))return a;var d=new RegExp("&[^;]+;|"+function(a){return a.replace(/([.?*+^$[\]\\(){}|-])/g,"\\$1")}(b),"gi");return a.replace(d,function(a){return a.toLowerCase()===b.toLowerCase()?"<em>"+a+"</em>":a})},c.safeToString=function(a){return angular.isUndefined(a)||null===a?"":a.toString().trim()},c.encodeHTML=function(a){return c.safeToString(a).replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">")},c.handleUndefinedResult=function(a,b){return function(){var c=a.apply(null,arguments);return angular.isUndefined(c)?b:c}},c.replaceSpacesWithDashes=function(a){return c.safeToString(a).replace(/\s/g,"-")},c.isModifierOn=function(a){return a.shiftKey||a.ctrlKey||a.altKey||a.metaKey},c.promisifyValue=function(a){return a=!!angular.isUndefined(a)||a,b[a?"when":"reject"]()},c.simplePubSub=function(){var a={};return{on:function(b,c,d){return b.split(" ").forEach(function(b){a[b]||(a[b]=[]),(d?[].unshift:[].push).call(a[b],c)}),this},trigger:function(b,d){return(a[b]||[]).every(function(a){return c.handleUndefinedResult(a,!0)(d)}),this}}},c}function l(a){a.put("ngTagsInput/auto-complete-match.html",'<span ng-bind-html="$highlight($getDisplayText())"></span>'),a.put("ngTagsInput/auto-complete.html",'<div class="autocomplete" ng-if="suggestionList.visible"><ul class="suggestion-list"><li class="suggestion-item" ng-repeat="item in suggestionList.items track by track(item)" ng-class="getSuggestionClass(item, $index)" ng-click="addSuggestionByIndex($index)" ng-mouseenter="suggestionList.select($index)"><ti-autocomplete-match scope="templateScope" data="::item"></ti-autocomplete-match></li></ul></div>'),a.put("ngTagsInput/tag-item.html",'<span ng-bind="$getDisplayText()"></span> <a class="remove-button" ng-click="$removeTag()" ng-bind="::$$removeTagSymbol"></a>'),a.put("ngTagsInput/tags-input.html",'<div class="host" tabindex="-1" ng-click="eventHandlers.host.click()" ti-transclude-append><div class="tags" ng-class="{focused: hasFocus}"><ul class="tag-list"><li ng-repeat="tag in tagList.items track by track(tag)" ng-class="getTagClass(tag, $index)" ng-click="eventHandlers.tag.click(tag)" ng-dblclick="eventHandlers.tag.dblclick(tag)"><ti-tag-item class="tag-item" scope="templateScope" data="tag" ng-hide="tag.editable"></ti-tag-item><input class="input" autocomplete="off" ng-model="editingTag.text" ng-model-options="{getterSetter: true}" ng-click="$event.stopPropagation();" ng-if="tag.editable" ng-keydown="eventHandlers.input.keydown($event)" ng-blur="eventHandlers.input.editBlur($event,tag)" ng-paste="eventHandlers.input.paste($event)" ng-disabled="disabled" ng-class="{\'invalid-tag\': editingTag.invalid}" ti-selectall="true" ti-autosize=""></li></ul><input class="input" autocomplete="off" ng-model="newTag.text" ng-model-options="{getterSetter: true}" ng-keydown="eventHandlers.input.keydown($event)" ng-focus="eventHandlers.input.focus($event)" ng-blur="eventHandlers.input.blur($event)" ng-paste="eventHandlers.input.paste($event)" ng-trim="false" ng-class="{\'invalid-tag\': newTag.invalid}" ng-disabled="disabled" ti-bind-attrs="{type: options.type, placeholder: options.placeholder, tabindex: options.tabindex, spellcheck: options.spellcheck}" ti-autosize></div></div>')}var m={KEYS:{backspace:8,tab:9,enter:13,escape:27,space:32,up:38,down:40,left:37,right:39,delete:46,comma:188},MAX_SAFE_INTEGER:9007199254740991,SUPPORTED_INPUT_TYPES:["text","email","url"]},n=function(a,b,c){return b in a?Object.defineProperty(a,b,{value:c,enumerable:!0,configurable:!0,writable:!0}):a[b]=c,a};b.$inject=["$timeout","$document","$window","$q","tagsInputConfig","tiUtil","tiConstants"],c.$inject=["tiUtil"],d.$inject=["$document","$timeout","$sce","$q","tagsInputConfig","tiUtil","tiConstants"],e.$inject=["$sce","tiUtil"],f.$inject=["tagsInputConfig"],h.$inject=["$timeout","$parse"],k.$inject=["$timeout","$q"],l.$inject=["$templateCache"],a.module("ngTagsInput",[]).directive("tagsInput",b).directive("tiTagItem",c).directive("autoComplete",d).directive("tiAutocompleteMatch",e).directive("tiAutosize",f).directive("tiBindAttrs",g).directive("tiTranscludeAppend",i).directive("tiSelectall",h).factory("tiUtil",k).constant("tiConstants",m).provider("tagsInputConfig",j).run(l)}(angular);
//# sourceMappingURL=ng-tags-input.min.js.map
tags-input{display:block}tags-input *,tags-input :after,tags-input :before{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}tags-input .host{position:relative;margin-top:5px;margin-bottom:5px;height:100%}tags-input .host:active{outline:0}tags-input .tags{-moz-appearance:textfield;-webkit-appearance:textfield;padding:1px;overflow:hidden;word-wrap:break-word;cursor:text;background-color:#fff;border:1px solid #a9a9a9;box-shadow:1px 1px 1px 0 #d3d3d3 inset;height:100%}tags-input .tags.focused{outline:0;-webkit-box-shadow:0 0 3px 1px rgba(5,139,242,.6);-moz-box-shadow:0 0 3px 1px rgba(5,139,242,.6);box-shadow:0 0 3px 1px rgba(5,139,242,.6)}tags-input .tags .tag-list{margin:0;padding:0;list-style-type:none}tags-input .tags .tag-item{margin:2px;padding:0 5px;display:inline-block;float:left;font:14px "Helvetica Neue",Helvetica,Arial,sans-serif;height:26px;line-height:25px;border:1px solid #acacac;border-radius:3px;background:-webkit-linear-gradient(top,#f0f9ff 0,#cbebff 47%,#a1dbff 100%);background:linear-gradient(to bottom,#f0f9ff 0,#cbebff 47%,#a1dbff 100%)}tags-input .tags .tag-item.selected{background:-webkit-linear-gradient(top,#febbbb 0,#fe9090 45%,#ff5c5c 100%);background:linear-gradient(to bottom,#febbbb 0,#fe9090 45%,#ff5c5c 100%)}tags-input .tags .tag-item .remove-button{margin:0 0 0 5px;padding:0;border:none;background:0 0;cursor:pointer;vertical-align:middle;font:700 16px Arial,sans-serif;color:#585858}tags-input .tags .input.invalid-tag,tags-input .tags .tag-item .remove-button:active{color:red}tags-input .tags .input{border:0;outline:0;margin:2px;padding:0 0 0 5px;float:left;height:26px;font:14px "Helvetica Neue",Helvetica,Arial,sans-serif}tags-input .tags .input::-ms-clear{display:none}tags-input.ng-invalid .tags{-webkit-box-shadow:0 0 3px 1px rgba(255,0,0,.6);-moz-box-shadow:0 0 3px 1px rgba(255,0,0,.6);box-shadow:0 0 3px 1px rgba(255,0,0,.6)}tags-input[disabled] .host:focus{outline:0}tags-input[disabled] .tags{background-color:#eee;cursor:default}tags-input[disabled] .tags .tag-item{opacity:.65;background:-webkit-linear-gradient(top,#f0f9ff 0,rgba(203,235,255,.75) 47%,rgba(161,219,255,.62) 100%);background:linear-gradient(to bottom,#f0f9ff 0,rgba(203,235,255,.75) 47%,rgba(161,219,255,.62) 100%)}tags-input[disabled] .tags .tag-item .remove-button{cursor:default}tags-input[disabled] .tags .tag-item .remove-button:active{color:#585858}tags-input[disabled] .tags .input{background-color:#eee;cursor:default}tags-input .autocomplete{margin-top:5px;position:absolute;padding:5px 0;z-index:999;width:100%;background-color:#fff;border:1px solid rgba(0,0,0,.2);-webkit-box-shadow:0 5px 10px rgba(0,0,0,.2);-moz-box-shadow:0 5px 10px rgba(0,0,0,.2);box-shadow:0 5px 10px rgba(0,0,0,.2)}tags-input .autocomplete .suggestion-list{margin:0;padding:0;list-style-type:none;max-height:280px;overflow-y:auto;position:relative}tags-input .autocomplete .suggestion-item{padding:5px 10px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font:16px "Helvetica Neue",Helvetica,Arial,sans-serif;color:#000;background-color:#fff}tags-input .autocomplete .suggestion-item.selected,tags-input .autocomplete .suggestion-item.selected em{color:#fff;background-color:#0097cf}tags-input .autocomplete .suggestion-item em{font:normal 700 16px "Helvetica Neue",Helvetica,Arial,sans-serif;color:#000;background-color:#fff}
/*!
* ngTagsInput v3.1.1
* http://mbenford.github.io/ngTagsInput
*
* Copyright (c) 2013-2017 Michael Benford
* License: MIT
*
* Generated at 2017-01-05 16:29:00 +0800
*/
(function() {
'use strict';
'use strict';
var KEYS = {
backspace: 8,
tab: 9,
enter: 13,
escape: 27,
space: 32,
up: 38,
down: 40,
left: 37,
right: 39,
delete: 46,
comma: 188
};
var MAX_SAFE_INTEGER = 9007199254740991;
var SUPPORTED_INPUT_TYPES = ['text', 'email', 'url'];
'use strict';
var tagsInput = angular.module('ngTagsInput', []);
'use strict';
/**
* @ngdoc directive
* @name tagsInput
* @module ngTagsInput
*
* @description
* Renders an input box with tag editing support.
*
* @param {string} ngModel Assignable Angular expression to data-bind to.
* @param {string=} [template=NA] URL or id of a custom template for rendering each tag.
* @param {string=} [templateScope=NA] Scope to be passed to custom templates - of both tagsInput and
* autoComplete directives - as $scope.
* @param {string=} [displayProperty=text] Property to be rendered as the tag label.
* @param {string=} [keyProperty=text] Property to be used as a unique identifier for the tag.
* @param {string=} [type=text] Type of the input element. Only 'text', 'email' and 'url' are supported values.
* @param {string=} [text=NA] Assignable Angular expression for data-binding to the element's text.
* @param {number=} tabindex Tab order of the control.
* @param {string=} [placeholder=Add a tag] Placeholder text for the control.
* @param {number=} [minLength=3] Minimum length for a new tag.
* @param {number=} [maxLength=MAX_SAFE_INTEGER] Maximum length allowed for a new tag.
* @param {number=} [minTags=0] Sets minTags validation error key if the number of tags added is less than minTags.
* @param {number=} [maxTags=MAX_SAFE_INTEGER] Sets maxTags validation error key if the number of tags added is greater
* than maxTags.
* @param {boolean=} [allowLeftoverText=false] Sets leftoverText validation error key if there is any leftover text in
* the input element when the directive loses focus.
* @param {string=} [removeTagSymbol=×] (Obsolete) Symbol character for the remove tag button.
* @param {boolean=} [addOnEnter=true] Flag indicating that a new tag will be added on pressing the ENTER key.
* @param {boolean=} [addOnSpace=false] Flag indicating that a new tag will be added on pressing the SPACE key.
* @param {boolean=} [addOnComma=true] Flag indicating that a new tag will be added on pressing the COMMA key.
* @param {boolean=} [addOnBlur=true] Flag indicating that a new tag will be added when the input field loses focus.
* @param {boolean=} [addOnPaste=false] Flag indicating that the text pasted into the input field will be split into tags.
* @param {string=} [pasteSplitPattern=,] Regular expression used to split the pasted text into tags.
* @param {boolean=} [replaceSpacesWithDashes=true] Flag indicating that spaces will be replaced with dashes.
* @param {string=} [allowedTagsPattern=.+] Regular expression that determines whether a new tag is valid.
* @param {boolean=} [enableEditingLastTag=false] Flag indicating that the last tag will be moved back into the new tag
* input box instead of being removed when the backspace key is pressed and the input box is empty.
* @param {boolean=} [addFromAutocompleteOnly=false] Flag indicating that only tags coming from the autocomplete list
* will be allowed. When this flag is true, addOnEnter, addOnComma, addOnSpace and addOnBlur values are ignored.
* @param {boolean=} [spellcheck=true] Flag indicating whether the browser's spellcheck is enabled for the input field or not.
* @param {expression=} [tagClass=NA] Expression to evaluate for each existing tag in order to get the CSS classes to be used.
* The expression is provided with the current tag as $tag, its index as $index and its state as $selected. The result
* of the evaluation must be one of the values supported by the ngClass directive (either a string, an array or an object).
* See https://docs.angularjs.org/api/ng/directive/ngClass for more information.
* @param {expression=} [onTagAdding=NA] Expression to evaluate that will be invoked before adding a new tag. The new
* tag is available as $tag. This method must return either a boolean value or a promise. If either a false value or a rejected
* promise is returned, the tag will not be added.
* @param {expression=} [onTagAdded=NA] Expression to evaluate upon adding a new tag. The new tag is available as $tag.
* @param {expression=} [onInvalidTag=NA] Expression to evaluate when a tag is invalid. The invalid tag is available as $tag.
* @param {expression=} [onTagRemoving=NA] Expression to evaluate that will be invoked before removing a tag. The tag
* is available as $tag. This method must return either a boolean value or a promise. If either a false value or a rejected
* promise is returned, the tag will not be removed.
* @param {expression=} [onTagRemoved=NA] Expression to evaluate upon removing an existing tag. The removed tag is available as $tag.
* @param {expression=} [onTagClicked=NA] Expression to evaluate upon clicking an existing tag. The clicked tag is available as $tag.
* @param {boolean=} [allowDblclickToEdit=false] Flag indicating that allow double click to edit current tag.
* @param {string=} [inputSplitPattern=null] Regular expression that split edit input tags.
*/
tagsInput.directive('tagsInput', ["$timeout", "$document", "$window", "$q", "tagsInputConfig", "tiUtil", function($timeout, $document, $window, $q, tagsInputConfig, tiUtil) {
function TagList(options, events, onTagAdding, onTagRemoving) {
var self = {}, getTagText, setTagText, canAddTag, canRemoveTag;
getTagText = function(tag) {
return tiUtil.safeToString(tag[options.displayProperty]);
};
setTagText = function(tag, text) {
tag[options.displayProperty] = text;
};
canAddTag = function(tag) {
var tagText = getTagText(tag);
var valid = tagText &&
tagText.length >= options.minLength &&
tagText.length <= options.maxLength &&
options.allowedTagsPattern.test(tagText) &&
!tiUtil.findInObjectArray(self.items, tag, options.keyProperty || options.displayProperty);
return $q.when(valid && onTagAdding({ $tag: tag })).then(tiUtil.promisifyValue);
};
canRemoveTag = function(tag) {
return $q.when(onTagRemoving({ $tag: tag })).then(tiUtil.promisifyValue);
};
self.items = [];
self.addText = function(text) {
var tag = {};
setTagText(tag, text);
return self.add(tag);
};
self.addTextArr = function(textArr) {
textArr.forEach(function(text) {
self.addText(text);
});
};
self.add = function(tag) {
var tagText = getTagText(tag);
if (options.replaceSpacesWithDashes) {
tagText = tiUtil.replaceSpacesWithDashes(tagText);
}
setTagText(tag, tagText);
return canAddTag(tag)
.then(function() {
self.items.push(tag);
events.trigger('tag-added', { $tag: tag });
})
.catch(function() {
if (tagText) {
events.trigger('invalid-tag', { $tag: tag });
}
});
};
self.remove = function(index) {
var tag = self.items[index];
return canRemoveTag(tag).then(function() {
self.items.splice(index, 1);
self.clearSelection();
events.trigger('tag-removed', { $tag: tag });
return tag;
});
};
self.select = function(index) {
if (index < 0) {
index = self.items.length - 1;
}
else if (index >= self.items.length) {
index = 0;
}
self.index = index;
self.selected = self.items[index];
};
self.selectPrior = function() {
self.select(--self.index);
};
self.selectNext = function() {
self.select(++self.index);
};
self.removeSelected = function() {
return self.remove(self.index);
};
self.clearSelection = function() {
self.selected = null;
self.index = -1;
};
self.clearSelection();
return self;
}
function validateType(type) {
return SUPPORTED_INPUT_TYPES.indexOf(type) !== -1;
}
return {
restrict: 'E',
require: 'ngModel',
scope: {
tags: '=ngModel',
text: '=?',
templateScope: '=?',
tagClass: '&',
onTagAdding: '&',
onTagAdded: '&',
onInvalidTag: '&',
onTagRemoving: '&',
onTagRemoved: '&',
onTagClicked: '&',
},
replace: false,
transclude: true,
templateUrl: 'ngTagsInput/tags-input.html',
controller: ["$scope", "$attrs", "$element", function($scope, $attrs, $element) {
$scope.events = tiUtil.simplePubSub();
tagsInputConfig.load('tagsInput', $scope, $attrs, {
template: [String, 'ngTagsInput/tag-item.html'],
type: [String, 'text', validateType],
placeholder: [String, 'Add a tag'],
tabindex: [Number, null],
removeTagSymbol: [String, String.fromCharCode(215)],
replaceSpacesWithDashes: [Boolean, true],
minLength: [Number, 3],
maxLength: [Number, MAX_SAFE_INTEGER],
addOnEnter: [Boolean, true],
addOnSpace: [Boolean, false],
addOnComma: [Boolean, true],
addOnBlur: [Boolean, true],
addOnPaste: [Boolean, false],
pasteSplitPattern: [RegExp, /,/],
allowedTagsPattern: [RegExp, /.+/],
enableEditingLastTag: [Boolean, false],
minTags: [Number, 0],
maxTags: [Number, MAX_SAFE_INTEGER],
displayProperty: [String, 'text'],
keyProperty: [String, ''],
allowLeftoverText: [Boolean, false],
addFromAutocompleteOnly: [Boolean, false],
spellcheck: [Boolean, true],
allowDblclickToEdit: [Boolean, false],
inputSplitPattern: [RegExp, null]
});
$scope.tagList = new TagList($scope.options, $scope.events,
tiUtil.handleUndefinedResult($scope.onTagAdding, true),
tiUtil.handleUndefinedResult($scope.onTagRemoving, true));
this.registerAutocomplete = function() {
var input = $element.find('input');
return {
addTag: function(tag) {
return $scope.tagList.add(tag);
},
getTags: function() {
return $scope.tagList.items;
},
getCurrentTagText: function() {
return $scope.newTag.text();
},
getOptions: function() {
return $scope.options;
},
getTemplateScope: function() {
return $scope.templateScope;
},
on: function(name, handler) {
$scope.events.on(name, handler, true);
return this;
}
};
};
this.registerTagItem = function() {
return {
getOptions: function() {
return $scope.options;
},
removeTag: function(index) {
if ($scope.disabled) {
return;
}
$scope.tagList.remove(index);
}
};
};
}],
link: function(scope, element, attrs, ngModelCtrl) {
var hotkeys = [KEYS.enter, KEYS.comma, KEYS.space, KEYS.backspace, KEYS.delete, KEYS.left, KEYS.right],
tagList = scope.tagList,
events = scope.events,
options = scope.options,
input = element.find('input'),
validationOptions = ['minTags', 'maxTags', 'allowLeftoverText'],
setElementValidity,
focusInput;
setElementValidity = function() {
ngModelCtrl.$setValidity('maxTags', tagList.items.length <= options.maxTags);
ngModelCtrl.$setValidity('minTags', tagList.items.length >= options.minTags);
ngModelCtrl.$setValidity('leftoverText', scope.hasFocus || options.allowLeftoverText ? true : !scope.newTag.text());
};
focusInput = function() {
$timeout(function() { input[0].focus(); });
};
ngModelCtrl.$isEmpty = function(value) {
return !value || !value.length;
};
scope.isEditing = false;
scope.editingTag = {
text: function(value) {
if (angular.isDefined(value)) {
scope.editingText = value;
events.trigger('edit-input-change', value);
} else {
return scope.editingText || '';
}
},
invalid: null
};
scope.newTag = {
text: function(value) {
if (angular.isDefined(value)) {
scope.text = value;
events.trigger('input-change', value);
}
else {
return scope.text || '';
}
},
invalid: null
};
scope.track = function(tag) {
return tag[options.keyProperty || options.displayProperty];
};
scope.getTagClass = function(tag, index) {
var selected = tag === tagList.selected;
return [
scope.tagClass({$tag: tag, $index: index, $selected: selected}),
{ selected: selected }
];
};
scope.$watch('tags', function(value) {
if (value) {
tagList.items = tiUtil.makeObjectArray(value, options.displayProperty);
scope.tags = tagList.items;
}
else {
tagList.items = [];
}
});
scope.$watch('tags.length', function() {
setElementValidity();
// ngModelController won't trigger validators when the model changes (because it's an array),
// so we need to do it ourselves. Unfortunately this won't trigger any registered formatter.
ngModelCtrl.$validate();
});
attrs.$observe('disabled', function(value) {
scope.disabled = value;
});
scope.eventHandlers = {
input: {
keydown: function($event) {
events.trigger('input-keydown', $event);
},
focus: function() {
if (scope.hasFocus) {
return;
}
scope.hasFocus = true;
events.trigger('input-focus');
},
blur: function() {
$timeout(function() {
var activeElement = $document.prop('activeElement'),
lostFocusToBrowserWindow = activeElement === input[0],
lostFocusToChildElement = element[0].contains(activeElement);
if (lostFocusToBrowserWindow || !lostFocusToChildElement) {
scope.hasFocus = false;
events.trigger('input-blur');
}
});
},
editBlur: function($event, tag) {
events.trigger('edit-input-blur', tag);
},
paste: function($event) {
$event.getTextData = function() {
var clipboardData = $event.clipboardData || ($event.originalEvent && $event.originalEvent.clipboardData);
return clipboardData ? clipboardData.getData('text/plain') : $window.clipboardData.getData('Text');
};
events.trigger('input-paste', $event);
}
},
host: {
click: function() {
if (scope.disabled) {
return;
}
focusInput();
}
},
tag: {
click: function(tag) {
events.trigger('tag-clicked', { $tag: tag });
},
dblclick: function(tag) {
events.trigger('tag-dblclicked', tag);
}
}
};
events
.on('tag-added', scope.onTagAdded)
.on('invalid-tag', scope.onInvalidTag)
.on('tag-removed', scope.onTagRemoved)
.on('tag-clicked', scope.onTagClicked)
.on('tag-dblclicked', function(tag) {
if (options.allowDblclickToEdit) {
scope.editingTag.text(tag.text);
tag.editable = true;
scope.isEditing = true;
}
})
.on('tag-added', function() {
scope.newTag.text('');
})
.on('tag-added tag-removed', function() {
scope.tags = tagList.items;
// Ideally we should be able call $setViewValue here and let it in turn call $setDirty and $validate
// automatically, but since the model is an array, $setViewValue does nothing and it's up to us to do it.
// Unfortunately this won't trigger any registered $parser and there's no safe way to do it.
ngModelCtrl.$setDirty();
focusInput();
})
.on('invalid-tag', function() {
scope.newTag.invalid = true;
})
.on('option-change', function(e) {
if (validationOptions.indexOf(e.name) !== -1) {
setElementValidity();
}
})
.on('input-change', function() {
tagList.clearSelection();
scope.newTag.invalid = null;
})
.on('input-focus', function() {
element.triggerHandler('focus');
ngModelCtrl.$setValidity('leftoverText', true);
})
.on('input-blur', function() {
if (options.addOnBlur && !options.addFromAutocompleteOnly) {
var tags = scope.newTag.text().split(options.inputSplitPattern);
tagList.addTextArr(tags);
}
element.triggerHandler('blur');
setElementValidity();
})
.on('edit-input-blur', function(tag) {
var editingText = scope.editingTag.text();
var tags = editingText.split(options.inputSplitPattern);
var firstTagText = tags.shift();
tag.text = firstTagText;
tagList.addTextArr(tags);
tag.editable = false;
scope.isEditing = false;
focusInput();
})
.on('edit-input-change', function() {
tagList.clearSelection();
scope.editingTag.invalid = null;
})
.on('input-keydown', function(event) {
var key = event.keyCode,
addKeys = {},
shouldAdd, shouldRemove, shouldSelect, shouldEditLastTag;
if (tiUtil.isModifierOn(event) || hotkeys.indexOf(key) === -1) {
return;
}
addKeys[KEYS.enter] = options.addOnEnter;
addKeys[KEYS.comma] = options.addOnComma;
addKeys[KEYS.space] = options.addOnSpace;
shouldAdd = !options.addFromAutocompleteOnly && addKeys[key];
shouldRemove = (key === KEYS.backspace || key === KEYS.delete) && tagList.selected;
shouldEditLastTag = key === KEYS.backspace && scope.newTag.text().length === 0 && options.enableEditingLastTag && !scope.isEditing;
shouldSelect = (key === KEYS.backspace || key === KEYS.left || key === KEYS.right) && scope.newTag.text().length === 0 && !options.enableEditingLastTag;
if (shouldAdd) {
if (scope.isEditing){
element.find('input')[0].blur();
return;
}
var tags = scope.newTag.text().split(options.inputSplitPattern);
tagList.addTextArr(tags);
}
else if (shouldEditLastTag) {
tagList.selectPrior();
tagList.removeSelected().then(function(tag) {
if (tag) {
scope.newTag.text(tag[options.displayProperty]);
}
});
}
else if (shouldRemove) {
tagList.removeSelected();
}
else if (shouldSelect) {
if (key === KEYS.left || key === KEYS.backspace) {
tagList.selectPrior();
}
else if (key === KEYS.right) {
tagList.selectNext();
}
}
if (shouldAdd || shouldSelect || shouldRemove || shouldEditLastTag) {
event.preventDefault();
}
})
.on('input-paste', function(event) {
if (options.addOnPaste) {
var data = event.getTextData();
var tags = data.split(options.pasteSplitPattern);
if (tags.length > 1) {
tagList.addTextArr(tags);
event.preventDefault();
}
}
});
}
};
}]);
'use strict';
/**
* @ngdoc directive
* @name tiTagItem
* @module ngTagsInput
*
* @description
* Represents a tag item. Used internally by the tagsInput directive.
*/
tagsInput.directive('tiTagItem', ["tiUtil", function(tiUtil) {
return {
restrict: 'E',
require: '^tagsInput',
template: '<ng-include src="$$template"></ng-include>',
scope: {
$scope: '=scope',
data: '='
},
link: function(scope, element, attrs, tagsInputCtrl) {
var tagsInput = tagsInputCtrl.registerTagItem(),
options = tagsInput.getOptions();
scope.$$template = options.template;
scope.$$removeTagSymbol = options.removeTagSymbol;
scope.$getDisplayText = function() {
return tiUtil.safeToString(scope.data[options.displayProperty]);
};
scope.$removeTag = function() {
tagsInput.removeTag(scope.$index);
};
scope.$watch('$parent.$index', function(value) {
scope.$index = value;
});
}
};
}]);
'use strict';
/**
* @ngdoc directive
* @name autoComplete
* @module ngTagsInput
*
* @description
* Provides autocomplete support for the tagsInput directive.
*
* @param {expression} source Expression to evaluate upon changing the input content. The input value is available as
* $query. The result of the expression must be a promise that eventually resolves to an array of strings.
* @param {string=} [template=NA] URL or id of a custom template for rendering each element of the autocomplete list.
* @param {string=} [displayProperty=tagsInput.displayText] Property to be rendered as the autocomplete label.
* @param {number=} [debounceDelay=100] Amount of time, in milliseconds, to wait before evaluating the expression in
* the source option after the last keystroke.
* @param {number=} [minLength=3] Minimum number of characters that must be entered before evaluating the expression
* in the source option.
* @param {boolean=} [highlightMatchedText=true] Flag indicating that the matched text will be highlighted in the
* suggestions list.
* @param {number=} [maxResultsToShow=10] Maximum number of results to be displayed at a time.
* @param {boolean=} [loadOnDownArrow=false] Flag indicating that the source option will be evaluated when the down arrow
* key is pressed and the suggestion list is closed. The current input value is available as $query.
* @param {boolean=} [loadOnEmpty=false] Flag indicating that the source option will be evaluated when the input content
* becomes empty. The $query variable will be passed to the expression as an empty string.
* @param {boolean=} [loadOnFocus=false] Flag indicating that the source option will be evaluated when the input element
* gains focus. The current input value is available as $query.
* @param {boolean=} [selectFirstMatch=true] Flag indicating that the first match will be automatically selected once
* the suggestion list is shown.
* @param {expression=} [matchClass=NA] Expression to evaluate for each match in order to get the CSS classes to be used.
* The expression is provided with the current match as $match, its index as $index and its state as $selected. The result
* of the evaluation must be one of the values supported by the ngClass directive (either a string, an array or an object).
* See https://docs.angularjs.org/api/ng/directive/ngClass for more information.
*/
tagsInput.directive('autoComplete', ["$document", "$timeout", "$sce", "$q", "tagsInputConfig", "tiUtil", function($document, $timeout, $sce, $q, tagsInputConfig, tiUtil) {
function SuggestionList(loadFn, options, events) {
var self = {}, getDifference, lastPromise, getTagId;
getTagId = function() {
return options.tagsInput.keyProperty || options.tagsInput.displayProperty;
};
getDifference = function(array1, array2) {
return array1.filter(function(item) {
return !tiUtil.findInObjectArray(array2, item, getTagId(), function(a, b) {
if (options.tagsInput.replaceSpacesWithDashes) {
a = tiUtil.replaceSpacesWithDashes(a);
b = tiUtil.replaceSpacesWithDashes(b);
}
return tiUtil.defaultComparer(a, b);
});
});
};
self.reset = function() {
lastPromise = null;
self.items = [];
self.visible = false;
self.index = -1;
self.selected = null;
self.query = null;
};
self.show = function() {
if (options.selectFirstMatch) {
self.select(0);
}
else {
self.selected = null;
}
self.visible = true;
};
self.load = tiUtil.debounce(function(query, tags) {
self.query = query;
var promise = $q.when(loadFn({ $query: query }));
lastPromise = promise;
promise.then(function(items) {
if (promise !== lastPromise) {
return;
}
items = tiUtil.makeObjectArray(items.data || items, getTagId());
items = getDifference(items, tags);
self.items = items.slice(0, options.maxResultsToShow);
if (self.items.length > 0) {
self.show();
}
else {
self.reset();
}
});
}, options.debounceDelay);
self.selectNext = function() {
self.select(++self.index);
};
self.selectPrior = function() {
self.select(--self.index);
};
self.select = function(index) {
if (index < 0) {
index = self.items.length - 1;
}
else if (index >= self.items.length) {
index = 0;
}
self.index = index;
self.selected = self.items[index];
events.trigger('suggestion-selected', index);
};
self.reset();
return self;
}
function scrollToElement(root, index) {
var element = root.find('li').eq(index),
parent = element.parent(),
elementTop = element.prop('offsetTop'),
elementHeight = element.prop('offsetHeight'),
parentHeight = parent.prop('clientHeight'),
parentScrollTop = parent.prop('scrollTop');
if (elementTop < parentScrollTop) {
parent.prop('scrollTop', elementTop);
}
else if (elementTop + elementHeight > parentHeight + parentScrollTop) {
parent.prop('scrollTop', elementTop + elementHeight - parentHeight);
}
}
return {
restrict: 'E',
require: '^tagsInput',
scope: {
source: '&',
matchClass: '&'
},
templateUrl: 'ngTagsInput/auto-complete.html',
controller: ["$scope", "$element", "$attrs", function($scope, $element, $attrs) {
$scope.events = tiUtil.simplePubSub();
tagsInputConfig.load('autoComplete', $scope, $attrs, {
template: [String, 'ngTagsInput/auto-complete-match.html'],
debounceDelay: [Number, 100],
minLength: [Number, 3],
highlightMatchedText: [Boolean, true],
maxResultsToShow: [Number, 10],
loadOnDownArrow: [Boolean, false],
loadOnEmpty: [Boolean, false],
loadOnFocus: [Boolean, false],
selectFirstMatch: [Boolean, true],
displayProperty: [String, '']
});
$scope.suggestionList = new SuggestionList($scope.source, $scope.options, $scope.events);
this.registerAutocompleteMatch = function() {
return {
getOptions: function() {
return $scope.options;
},
getQuery: function() {
return $scope.suggestionList.query;
}
};
};
}],
link: function(scope, element, attrs, tagsInputCtrl) {
var hotkeys = [KEYS.enter, KEYS.tab, KEYS.escape, KEYS.up, KEYS.down],
suggestionList = scope.suggestionList,
tagsInput = tagsInputCtrl.registerAutocomplete(),
options = scope.options,
events = scope.events,
shouldLoadSuggestions;
options.tagsInput = tagsInput.getOptions();
shouldLoadSuggestions = function(value) {
return value && value.length >= options.minLength || !value && options.loadOnEmpty;
};
scope.templateScope = tagsInput.getTemplateScope();
scope.addSuggestionByIndex = function(index) {
suggestionList.select(index);
scope.addSuggestion();
};
scope.addSuggestion = function() {
var added = false;
if (suggestionList.selected) {
tagsInput.addTag(angular.copy(suggestionList.selected));
suggestionList.reset();
added = true;
}
return added;
};
scope.track = function(item) {
return item[options.tagsInput.keyProperty || options.tagsInput.displayProperty];
};
scope.getSuggestionClass = function(item, index) {
var selected = item === suggestionList.selected;
return [
scope.matchClass({$match: item, $index: index, $selected: selected}),
{ selected: selected }
];
};
tagsInput
.on('tag-added tag-removed invalid-tag input-blur', function() {
suggestionList.reset();
})
.on('input-change', function(value) {
if (shouldLoadSuggestions(value)) {
suggestionList.load(value, tagsInput.getTags());
}
else {
suggestionList.reset();
}
})
.on('input-focus', function() {
var value = tagsInput.getCurrentTagText();
if (options.loadOnFocus && shouldLoadSuggestions(value)) {
suggestionList.load(value, tagsInput.getTags());
}
})
.on('input-keydown', function(event) {
var key = event.keyCode,
handled = false;
if (tiUtil.isModifierOn(event) || hotkeys.indexOf(key) === -1) {
return;
}
if (suggestionList.visible) {
if (key === KEYS.down) {
suggestionList.selectNext();
handled = true;
}
else if (key === KEYS.up) {
suggestionList.selectPrior();
handled = true;
}
else if (key === KEYS.escape) {
suggestionList.reset();
handled = true;
}
else if (key === KEYS.enter || key === KEYS.tab) {
handled = scope.addSuggestion();
}
}
else {
if (key === KEYS.down && scope.options.loadOnDownArrow) {
suggestionList.load(tagsInput.getCurrentTagText(), tagsInput.getTags());
handled = true;
}
}
if (handled) {
event.preventDefault();
event.stopImmediatePropagation();
return false;
}
});
events.on('suggestion-selected', function(index) {
scrollToElement(element, index);
});
}
};
}]);
'use strict';
/**
* @ngdoc directive
* @name tiAutocompleteMatch
* @module ngTagsInput
*
* @description
* Represents an autocomplete match. Used internally by the autoComplete directive.
*/
tagsInput.directive('tiAutocompleteMatch', ["$sce", "tiUtil", function($sce, tiUtil) {
return {
restrict: 'E',
require: '^autoComplete',
template: '<ng-include src="$$template"></ng-include>',
scope: {
$scope: '=scope',
data: '='
},
link: function(scope, element, attrs, autoCompleteCtrl) {
var autoComplete = autoCompleteCtrl.registerAutocompleteMatch(),
options = autoComplete.getOptions();
scope.$$template = options.template;
scope.$index = scope.$parent.$index;
scope.$highlight = function(text) {
if (options.highlightMatchedText) {
text = tiUtil.safeHighlight(text, autoComplete.getQuery());
}
return $sce.trustAsHtml(text);
};
scope.$getDisplayText = function() {
return tiUtil.safeToString(scope.data[options.displayProperty || options.tagsInput.displayProperty]);
};
}
};
}]);
'use strict';
/**
* @ngdoc directive
* @name tiTranscludeAppend
* @module ngTagsInput
*
* @description
* Re-creates the old behavior of ng-transclude. Used internally by tagsInput directive.
*/
tagsInput.directive('tiTranscludeAppend', function() {
return function(scope, element, attrs, ctrl, transcludeFn) {
transcludeFn(function(clone) {
element.append(clone);
});
};
});
'use strict';
/**
* @ngdoc directive
* @name tiAutosize
* @module ngTagsInput
*
* @description
* Automatically sets the input's width so its content is always visible. Used internally by tagsInput directive.
*/
tagsInput.directive('tiAutosize', ["tagsInputConfig", function(tagsInputConfig) {
return {
restrict: 'A',
require: 'ngModel',
link: function(scope, element, attrs, ctrl) {
var threshold = tagsInputConfig.getTextAutosizeThreshold(),
span, resize;
span = angular.element('<span class="input"></span>');
span.css('display', 'none')
.css('visibility', 'hidden')
.css('width', 'auto')
.css('white-space', 'pre');
element.parent().append(span);
resize = function(originalValue) {
var value = originalValue, width;
if (angular.isString(value) && value.length === 0) {
value = attrs.placeholder;
}
if (value) {
span.text(value);
span.css('display', '');
width = span.prop('offsetWidth');
span.css('display', 'none');
}
element.css('width', width ? width + threshold + 'px' : '');
return originalValue;
};
ctrl.$parsers.unshift(resize);
ctrl.$formatters.unshift(resize);
attrs.$observe('placeholder', function(value) {
if (!ctrl.$modelValue) {
resize(value);
}
});
}
};
}]);
'use strict';
/**
* @ngdoc directive
* @name tiBindAttrs
* @module ngTagsInput
*
* @description
* Binds attributes to expressions. Used internally by tagsInput directive.
*/
tagsInput.directive('tiBindAttrs', function() {
return function(scope, element, attrs) {
scope.$watch(attrs.tiBindAttrs, function(value) {
angular.forEach(value, function(value, key) {
attrs.$set(key, value);
});
}, true);
};
});
'use strict';
/**
* @ngdoc service
* @name tagsInputConfig
* @module ngTagsInput
*
* @description
* Sets global configuration settings for both tagsInput and autoComplete directives. It's also used internally to parse and
* initialize options from HTML attributes.
*/
tagsInput.provider('tagsInputConfig', function() {
var globalDefaults = {},
interpolationStatus = {},
autosizeThreshold = 3;
/**
* @ngdoc method
* @name tagsInputConfig#setDefaults
* @description Sets the default configuration option for a directive.
*
* @param {string} directive Name of the directive to be configured. Must be either 'tagsInput' or 'autoComplete'.
* @param {object} defaults Object containing options and their values.
*
* @returns {object} The service itself for chaining purposes.
*/
this.setDefaults = function(directive, defaults) {
globalDefaults[directive] = defaults;
return this;
};
/**
* @ngdoc method
* @name tagsInputConfig#setActiveInterpolation
* @description Sets active interpolation for a set of options.
*
* @param {string} directive Name of the directive to be configured. Must be either 'tagsInput' or 'autoComplete'.
* @param {object} options Object containing which options should have interpolation turned on at all times.
*
* @returns {object} The service itself for chaining purposes.
*/
this.setActiveInterpolation = function(directive, options) {
interpolationStatus[directive] = options;
return this;
};
/**
* @ngdoc method
* @name tagsInputConfig#setTextAutosizeThreshold
* @description Sets the threshold used by the tagsInput directive to re-size the inner input field element based on its contents.
*
* @param {number} threshold Threshold value, in pixels.
*
* @returns {object} The service itself for chaining purposes.
*/
this.setTextAutosizeThreshold = function(threshold) {
autosizeThreshold = threshold;
return this;
};
this.$get = ["$interpolate", function($interpolate) {
var converters = {};
converters[String] = function(value) { return value; };
converters[Number] = function(value) { return parseInt(value, 10); };
converters[Boolean] = function(value) { return value.toLowerCase() === 'true'; };
converters[RegExp] = function(value) { return new RegExp(value); };
return {
load: function(directive, scope, attrs, options) {
var defaultValidator = function() { return true; };
scope.options = {};
angular.forEach(options, function(value, key) {
var type, localDefault, validator, converter, getDefault, updateValue;
type = value[0];
localDefault = value[1];
validator = value[2] || defaultValidator;
converter = converters[type];
getDefault = function() {
var globalValue = globalDefaults[directive] && globalDefaults[directive][key];
return angular.isDefined(globalValue) ? globalValue : localDefault;
};
updateValue = function(value) {
scope.options[key] = value && validator(value) ? converter(value) : getDefault();
};
if (interpolationStatus[directive] && interpolationStatus[directive][key]) {
attrs.$observe(key, function(value) {
updateValue(value);
scope.events.trigger('option-change', { name: key, newValue: value });
});
}
else {
updateValue(attrs[key] && $interpolate(attrs[key])(scope.$parent));
}
});
},
getTextAutosizeThreshold: function() {
return autosizeThreshold;
}
};
}];
});
'use strict';
/***
* @ngdoc service
* @name tiUtil
* @module ngTagsInput
*
* @description
* Helper methods used internally by the directive. Should not be called directly from user code.
*/
tagsInput.factory('tiUtil', ["$timeout", "$q", function($timeout, $q) {
var self = {};
self.debounce = function(fn, delay) {
var timeoutId;
return function() {
var args = arguments;
$timeout.cancel(timeoutId);
timeoutId = $timeout(function() { fn.apply(null, args); }, delay);
};
};
self.makeObjectArray = function(array, key) {
if (!angular.isArray(array) || array.length === 0 || angular.isObject(array[0])) {
return array;
}
var newArray = [];
array.forEach(function(item) {
var obj = {};
obj[key] = item;
newArray.push(obj);
});
return newArray;
};
self.findInObjectArray = function(array, obj, key, comparer) {
var item = null;
comparer = comparer || self.defaultComparer;
array.some(function(element) {
if (comparer(element[key], obj[key])) {
item = element;
return true;
}
});
return item;
};
self.defaultComparer = function(a, b) {
// I'm aware of the internationalization issues regarding toLowerCase()
// but I couldn't come up with a better solution right now
return self.safeToString(a).toLowerCase() === self.safeToString(b).toLowerCase();
};
self.safeHighlight = function(str, value) {
str = self.encodeHTML(str);
value = self.encodeHTML(value);
if (!value) {
return str;
}
function escapeRegexChars(str) {
return str.replace(/([.?*+^$[\]\\(){}|-])/g, '\\$1');
}
var expression = new RegExp('&[^;]+;|' + escapeRegexChars(value), 'gi');
return str.replace(expression, function(match) {
return match.toLowerCase() === value.toLowerCase() ? '<em>' + match + '</em>' : match;
});
};
self.safeToString = function(value) {
return angular.isUndefined(value) || value == null ? '' : value.toString().trim();
};
self.encodeHTML = function(value) {
return self.safeToString(value)
.replace(/&/g, '&')
.replace(/</g, '<')
.replace(/>/g, '>');
};
self.handleUndefinedResult = function(fn, valueIfUndefined) {
return function() {
var result = fn.apply(null, arguments);
return angular.isUndefined(result) ? valueIfUndefined : result;
};
};
self.replaceSpacesWithDashes = function(str) {
return self.safeToString(str).replace(/\s/g, '-');
};
self.isModifierOn = function(event) {
return event.shiftKey || event.ctrlKey || event.altKey || event.metaKey;
};
self.promisifyValue = function(value) {
value = angular.isUndefined(value) ? true : value;
return $q[value ? 'when' : 'reject']();
};
self.simplePubSub = function() {
var events = {};
return {
on: function(names, handler, first) {
names.split(' ').forEach(function(name) {
if (!events[name]) {
events[name] = [];
}
var method = first ? [].unshift : [].push;
method.call(events[name], handler);
});
return this;
},
trigger: function(name, args) {
var handlers = events[name] || [];
handlers.every(function(handler) {
return self.handleUndefinedResult(handler, true)(args);
});
return this;
}
};
};
return self;
}]);
'use strict';
/**
* @ngdoc directive
* @name tiSelectall
* @module ngTagsInput
*
* @description
* Automatically select all and focus the input. Used internally by tagsInput directive.
*/
tagsInput.directive('tiSelectall', ['$timeout', '$parse', function($timeout, $parse) {
return {
scope: {}, // optionally create a child scope
link: function(scope, element, attrs) {
scope.selectAll = false;
var model = $parse(attrs.tiSelectall);
var selectAll = function () {
$timeout(function() {
element[0].focus();
element[0].select();
});
};
scope.$watch(model, function(value) {
if (value === true) {
selectAll();
}
scope.selectAll = value;
});
}
};
}]);
/* HTML templates */
tagsInput.run(["$templateCache", function($templateCache) {
'use strict';
$templateCache.put('ngTagsInput/tags-input.html',
"<div class=\"host\" tabindex=\"-1\" ng-click=\"eventHandlers.host.click()\" ti-transclude-append><div class=\"tags\" ng-class=\"{focused: hasFocus}\"><ul class=\"tag-list\"><li ng-repeat=\"tag in tagList.items track by track(tag)\" ng-class=\"getTagClass(tag, $index)\" ng-click=\"eventHandlers.tag.click(tag)\" ng-dblclick=\"eventHandlers.tag.dblclick(tag)\"><ti-tag-item class=\"tag-item\" scope=\"templateScope\" data=\"tag\" ng-hide=\"tag.editable\"></ti-tag-item><input class=\"input\" autocomplete=\"off\" ng-model=\"editingTag.text\" ng-model-options=\"{getterSetter: true}\" ng-click=\"$event.stopPropagation();\" ng-if=\"tag.editable\" ng-keydown=\"eventHandlers.input.keydown($event)\" ng-blur=\"eventHandlers.input.editBlur($event,tag)\" ng-paste=\"eventHandlers.input.paste($event)\" ng-disabled=\"disabled\" ti-selectall=\"true\" ti-autosize=\"\"></li></ul><input class=\"input\" autocomplete=\"off\" ng-model=\"newTag.text\" ng-model-options=\"{getterSetter: true}\" ng-keydown=\"eventHandlers.input.keydown($event)\" ng-focus=\"eventHandlers.input.focus($event)\" ng-blur=\"eventHandlers.input.blur($event)\" ng-paste=\"eventHandlers.input.paste($event)\" ng-trim=\"false\" ng-class=\"{'invalid-tag': newTag.invalid}\" ng-disabled=\"disabled\" ti-bind-attrs=\"{type: options.type, placeholder: options.placeholder, tabindex: options.tabindex, spellcheck: options.spellcheck}\" ti-autosize></div></div>"
);
$templateCache.put('ngTagsInput/tag-item.html',
"<span ng-bind=\"$getDisplayText()\"></span> <a class=\"remove-button\" ng-click=\"$removeTag()\" ng-bind=\"::$$removeTagSymbol\"></a>"
);
$templateCache.put('ngTagsInput/auto-complete.html',
"<div class=\"autocomplete\" ng-if=\"suggestionList.visible\"><ul class=\"suggestion-list\"><li class=\"suggestion-item\" ng-repeat=\"item in suggestionList.items track by track(item)\" ng-class=\"getSuggestionClass(item, $index)\" ng-click=\"addSuggestionByIndex($index)\" ng-mouseenter=\"suggestionList.select($index)\"><ti-autocomplete-match scope=\"templateScope\" data=\"::item\"></ti-autocomplete-match></li></ul></div>"
);
$templateCache.put('ngTagsInput/auto-complete-match.html',
"<span ng-bind-html=\"$highlight($getDisplayText())\"></span>"
);
}]);
}());
[
{ "text": "Tag1","id": 1 },
{ "text": "Tag2","id": 2 },
{ "text": "Tag3","id": 3 },
{ "text": "Tag4","id": 4 },
{ "text": "Tag5","id": 5 },
{ "text": "Tag6","id": 6 },
{ "text": "Tag7","id": 7 },
{ "text": "Tag8","id": 8 },
{ "text": "Tag9","id": 9 },
{ "text": "Tag10","id": 10 },
{ "text": "Tag10", "id": 11}
]