Angularjs Input Tags List autocomplete textbox – ngTagsInput

Angularjs Input Tags List autocomplete textbox – ngTagsInput

In this Post We Will Explain About is Angularjs Input Tags List autocomplete textbox – ngTagsInput With Example and Demo.Welcome on infinityknow.com – Examples, The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to Dynamic Autocomplete Tag Input Plugin For AngularJSExample

In this post we will show you Best way to implement AngularJS – Input multiple tags with dynamic autocomplete example, hear for AngularJS Multi-Input Tags/Tagging Exampleswith Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.

1. ngTagsInput Module

AngularJS ngTagsInput Pros:

– Simple Autocomplete all the support (yes!).
– Lots of simple examples in jsfiddle.
– Seems are very new stable.
– Lots of create options such as simple adding on light spacebar as well as comma, and the replace spaces all the data with dashes

AngularJS ngTagsInput Cons:

– No any type bootstrap examples but very easy to work out.

Make a HTML file and define markup

<div ng-app="liveApp">
    <div ng-controller="liveCtrl as post">
         <h3>Boilerplate for AngularJS 1.3</h3>
        {{ post.mystring }}
        <tags-input ng-model="post.tags"
            placeholder="Please Enter things...">
            <auto-complete source="post.loadTags($query)"></auto-complete>
        </tags-input>
        <ul>
            <li ng-repeat="tag in post.tags">{{tag.text}}</li>
        </ul>
        <button ng-click="post.ldump_arr()" class="btn">Dump Tags to Console</button>
        <button ng-click="post.live_string_convert()" class="btn">Dump Tags to Console</button>
    </div>

Make a js file and define scripting

var app = angular.module('liveApp', ['ngTagsInput'])
.controller('liveCtrl', function () {
    this.mystring = "You are Most welcome- infinityknow.com!";
    this.tags = ["laravel","PHP","Angularjs"];
    this.ldump_arr = function(){
        console.log(this.tags);
    };
    this.loadTags = function(query){
        return [
            { text: 'A Live tag' },
            { text: 'Another Live  Tag' },
            { text: 'Live Tag1' },
            { text: 'Live Tag2' },
            { text: 'Live Tag3' },
            { text: 'Live Tag4' },
            { text: 'Live Tag5' }
        ];
    };
    this.live_string_convert = function(){
        var larray = this.tags; //data bound var
        var newarray = [];
        angular.forEach(larray,function(ob){
            newarray.push(ob.text);
        });
        console.log("my new value array: ["+newarray.join(',')+"]");
    };
    
});

Example

I hope you have Got What is Bootstrap AngularJS Tags list – autocomplete And how it works.I would Like to have FeadBack From My Blog(infinityknow.com) readers.Your Valuable FeadBack,Any Question,or any Comments abaout This Article(infinityknow.com) Are Most Always Welcome.