Getting started

Always

Add references to AngularJS.
Add references to jsTag's javascript and css files.
Add jsTag as a dependency to your app. My app is named "demoApp", so it looks like this:
angular.module('demoApp', ['jsTag']);

Show off

Here is a full example of jsTag together with twitter's typeahead.

Number of tags: {{tags.getNumberOfTags()}}

How to use?

Basic

After adding jsTag as a depedency, you can easily achieve:

Html

                  <js-tag></js-tag>

Customized #1

Customize jsTag as follows:

Html

                  <js-tag js-tag-options="{
  "texts": {
    "inputPlaceHolder": "Type text here"
  },
  "defaultTags": ["Default Tag #1", "Default Tag #2"]
}"></js-tag>

Customized #2

We can also customize our jsTag using a controller:

Html

                  <div ng-controller="CustomizedController">
  <js-tag js-tag-options="jsTagOptions"></js-tag>
</div>

Javascript

                  demoApp.controller('CustomizedController', ['$scope', function($scope) {
  // Export jsTag's options
  $scope.jsTagOptions = {
    "texts": {
      "inputPlaceHolder": "Type text here"
    },
    "defaultTags": ["Default Tag #1", "Default Tag #2"]
  };
}]);

Customize using jsTagOption

There are several ways to configure the behaviour of jsTag. The default options object looks like this but any parameters passed in replaces the original.

JSON

                  {
  'edit': true,
  'defaultTags': [],
  'breakCodes': [
    13, // Return
    44 // Comma
  ],
  'splitter': ',',
  'texts': {
    'inputPlaceHolder': "Input text",
    'removeSymbol': String.fromCharCode(215)
  }
}

Non-editable

It is simple to cancel the edit feature if needed:

Html

                  <div ng-controller="NoneditableController">
  <js-tag js-tag-options="jsTagOptions"></js-tag>
</div>

Javascript

                  demoApp.controller('NoneditableController', ['$scope', function($scope) {
  // Export jsTag's options
  $scope.jsTagOptions = {
    'edit': false,
    'defaultTags': ['Default Tag #1', 'Default Tag #2']
  };
}]);

More Control

You want more control over your tags? Tell it to the directive!
In the following example we initialize our own JSTagsCollection to have full control:

Number of tags: {{tags.getNumberOfTags()}}

Html

                  <div ng-controller="MoreControlController">
  <js-tag js-tag-options="jsTagOptions"></js-tag>
  Number of tags: {{tags.getNumberOfTags()}}
</div>

Javascript

                  demoApp.controller('MoreControlController', ['$scope', 'JSTagsCollection', function($scope, JSTagsCollection) {
  // Build JSTagsCollection
  $scope.tags = new JSTagsCollection(["jsTag", "angularJS"]);

  // Export jsTags options, inlcuding our own tags object
  $scope.jsTagOptions = {
    "tags": $scope.tags
  };
}]);

Twitter's typeahead

Here is an advanced example how to use twitter's typeahead together with jsTag.

Add references to angular-typeahead.
Add references to twitter's typeahead.
Add angular-typeahead as a dependency to your app. My app is named "demoApp", so it looks like this:
angular.module('demoApp', ['siyfion.sfTypeahead','jsTag']);

Number of tags: {{tags.getNumberOfTags()}}

Html

                <div ng-controller="TypeaheadController">
  <js-tag js-tag-mode="typeahead" js-tag-options="jsTagOptions"></js-tag>
  Number of tags: {{tags.getNumberOfTags()}}
</div>

Javascript

                demoApp.controller('TypeaheadController', ['$scope', 'JSTagsCollection', function($scope, JSTagsCollection) {
  // Build JSTagsCollection
  $scope.tags = new JSTagsCollection(["jsTag", "angularJS"]);

  // Export jsTags options, inlcuding our own tags object
  $scope.jsTagOptions = {
    'tags': $scope.tags
  };

  // **** Typeahead code **** //

  // Build suggestions array
  var suggestions = ['jsTag', 'c#', 'java', 'javascript', 'jquery', 'android' , 'php', 'c++', 'python', 'ios', 'mysql', 'iphone', 'sql', 'html', 'css', 'objective-c', 'ruby-on-rails', 'c', 'sql-server', 'ajax', 'xml', '.net', 'ruby', 'regex', 'database', 'vb.net', 'arrays', 'eclipse', 'json', 'django', 'linux', 'xcode', 'windows', 'html5', 'winforms', 'r', 'wcf', 'visual-studio-2010', 'forms', 'performance', 'excel', 'spring', 'node.js', 'git', 'apache', 'entity-framework', 'asp.net', 'web-services', 'linq', 'perl', 'oracle', 'action-script', 'wordpress', 'delphi', 'jquery-ui', 'tsql', 'mongodb', 'neo4j', 'angularJS', 'unit-testing', 'postgresql', 'scala', 'xaml', 'http', 'validation', 'rest', 'bash', 'django', 'silverlight', 'cake-php', 'elgg', 'oracle', 'cocoa', 'swing', 'mocha', 'amazon-web-services'];
  suggestions = suggestions.map(function(item) { return { "suggestion": item } });

  // Instantiate the bloodhound suggestion engine
  var suggestions = new Bloodhound({
    datumTokenizer: function(d) { return Bloodhound.tokenizers.whitespace(d.suggestion); },
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    local: suggestions
  });

  // Initialize the bloodhound suggestion engine
  suggestions.initialize();

  // Single dataset example
  $scope.exampleData = {
    displayKey: 'suggestion',
    source: suggestions.ttAdapter()
  };

  // Typeahead options object
  $scope.exampleOptions = {
    hint: false,
    highlight: true
  };
}]);

Disclaimer: Twitter's typeahead is well integrated into jsTag, but you can easily change that by modifying the template and adding a directive.

Why jsTag?

Finally a real MVC library! Pure use of angularJS has it's benefits.

It can be tested (no unit tests yet, but it will have).
Working with models is great, see demo for example.
Maintainable code.
Easy to customize!

About

jsTag is an open source project for editing tags (aka tokenizer) based on pure angularJS.
The project was created by eranhirs for inner purpose.
Any contribution to the project is more than welcome, at the project's github page.