utkarsh2k2 utkarsh2k2 - 1 year ago 183
AngularJS Question

Multiple-tags input field

I recently started with AngularJS, and am currently working on a simple form with a tags input field and a submit button. The input field is supposed to accept multiple tags so that on clicking submit all the tags get saved as an array.

Now I am currently using ngTagsInput directive which I found on github(http://mbenford.github.io/ngTagsInput/). This directive gives me

HTML element which creates an input field that accepts multiple tags before submission. Here is what it look like(look at the Tags field):

enter image description here

This works fine, what I need now is a directive which gives me similar functionality but instead of an element ie.
, I want an attribute which I can include inside the conventional
element like
<input attribute='tags-input'>


  1. Is there a way I can use ngTagsInput as an attribute?

  2. Are there any other directives out there which may suit my need? If yes then please post the link in the answer.

Thanks in advance.

Answer Source

No. As you can see on tags-input.js file, the directive is configured as an element:

return {
    restrict: 'E',
    require: 'ngModel',
    scope: {
        tags: '=ngModel',
        text: '=?',
        templateScope: '=?',
        tagClass: '&',
        onTagAdding: '&',
        onTagAdded: '&',
        onInvalidTag: '&',
        onTagRemoving: '&',
        onTagRemoved: '&',
        onTagClicked: '&',

But you can write your own directive with attribute type and "replace" your div element to the tags-input element.

I wrote this example:

    return {
      restrict: 'A',
      require: '?ngModel',
        ngModel: '='
      link: function($scope, element, attrs, controller) {
        var attrsText = '';
        $.each($(element)[0].attributes, function(idx, attr) {
          if (attr.nodeName === "tags-input-attr" || attr.nodeName === "ng-model") 

          attrsText += " " + attr.nodeName + "='" + attr.nodeValue + "'";

        var html ='<tags-input ng-model="ngModel" ' + attrsText + '></tags-input>';
        e =$compile(html)($scope);

Now you can configure your tags-input elements in two ways:

Element way:

<tags-input ng-model="tags" add-on-paste="true" display-property="text" placeholder="Add a Tag here..." ></tags-input>

Attribute way:

<input tags-input-attr ng-model="tags" add-on-paste="true" display-property="text" placeholder="Add a Tag here..."  />

You can see this in action at Plunker:


Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download