ngTagsInput Demo

Basic AngularJS (1.3.x) + ngTagsInput directive demo, library from: http://mbenford.github.io/ngTagsInput/gettingstarted

by sqiudward

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ng-tags-input/3.0.0/ng-tags-input.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/ng-tags-input/3.0.0/ng-tags-input.min.js"></script>
<div ng-app="myApp">
    <div ng-controller="MyCtrl as main">
         <h3>Boilerplate for AngularJS 1.3</h3>
        {{ main.greeting }}
        <tags-input ng-model="main.tags"
            placeholder="Enter things...">
            <auto-complete source="main.loadTags($query)"></auto-complete>
        </tags-input>
        <ul>
            <li ng-repeat="tag in main.tags">{{tag.text}}</li>
        </ul>
        <button ng-click="main.dumpTagsToConsole()" class="btn">Dump Tags to Console</button>
        <button ng-click="main.preSaveConvertTagsArToStringAr()" class="btn">Dump Tags to Console</button>
    </div>
</div>

<!-- ng-tags-input has a Bootstrap compatible stylesheet -->
<!--
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/ng-tags-input/3.0.0/ng-tags-input.bootstrap.min.css">
-->

JavaScript

var app = angular.module('myApp', ['ngTagsInput'])

.controller('MyCtrl', function () {
    this.greeting = "Hello World!";
    
    this.tags = ["one","two","three"];
    
    this.dumpTagsToConsole = function(){
        console.log(this.tags);
        //during load, if it has a value, it converts the string prototype array into an array of objects
    };
    
    this.loadTags = function(query){
        //ideally return a searched set from $http w/ query val, etc.
        //function returns array of object results
        return [
            { text: 'A Tag' },
            { text: 'Another Tag' },
            { text: 'Tag1' },
            { text: 'Tag2' },
            { text: 'Tag3' },
            { text: 'Tag4' },
            { text: 'Tag5' }
        ];
    };
    
    this.preSaveConvertTagsArToStringAr = function(){
        var tmpAr = this.tags; //data bound var
        var nwAr = [];
        angular.forEach(tmpAr,function(ob){
            nwAr.push(ob.text);
        });
        console.log("my new value array: ["+nwAr.join(',')+"]");
    };
    
});