Tags Input Control for AngularJS


May 30, 2015 1 minutes read

Stay DRY! Don’t waste your time implementing tags input control for AngularJS yourself! There is an excellent AngularJS module for that called «ngTagsInput». It’s also supports autocomptetion, validations,custom styles and templates. See the demos.

It took me just 10 minutes to add that type of control to my application.

All you need to do is: 1. Add NPM or Bower dependency

    npm install ng-tags-input --save
    bower install ng-tags-input --save
  1. Include script and CSS to your html page. If you’re using some dependency injection pre-processor like gulp-inject or gulp-ng-inject you don’t need it.

    <script src="angular.js"></script>
    <script src="ng-tags-input.js"></script>
    <link rel="stylesheet" type="text/css" href="ng-tags-input.css">
    
  2. declare module dependency:

    angular.module('myApp', ['ngTagsInput'])
        .controller('MyCtrl', function($scope, $http) {
            $scope.tags = [
                { text: 'just' },
                { text: 'some' },
                { text: 'cool' },
                { text: 'tags' }
            ];
            $scope.loadTags = function(query) {
                 return $http.get('/tags?query=' + query);
            };
        });
    
  3. Add input control to html

    <body ng-app="myApp" ng-controller="MyCtrl">
        <tags-input ng-model="tags">
            <auto-complete source="loadTags($query)"></auto-complete>
        </tags-input>
    </body>
    

Pretty simple, isn’t it? The only thing to consider is handling of the tags model. $scope.tags will be an array of objects on the form {text:value}. You may need to transfer them to array of strings:

var tagValues = $scope.tags.map(function(input) {return input.text;});

See Also

One More Grid for AngularJS

After playing with ui.grid I found one more library to impmenent grids in AngularJS - angularGrid. It’s quite easy to integrate and faster than ui.grid. You may find other reasons of using this grid on the author’s post.

Javascript Solari Board

Solari Board is a javascript app for displaying some status information. For example, it can be used to scheduling support team activity or displaying project build status from CI server (e.g. Jenkins) This article with a video about how the guys from FogCreek software has integrated SolariBoard into BigBoard to monitor their support team activity.

logo   Never miss a story, subscribe to our newsletter