CODEWITHSUNDEEP
angularjsbootstrap-tags-input
Shalini Raj
Shalini Raj

Reputation: 307

Bootstrap Tags Input error,Unable to set value of textbox using

I am trying to make an input area which allows users to create tags. I found bootstrap tags input and tried using it. It works but when I try to set data in the input field , it doesn't works at all. Here's my code :

 <input id="tagsdata" type="text" class="form-control" data-role="tagsinput"  placeholder="Add tags"/>


  $('#tagsdata').val(response.data.tags); // response.data.tags is a string which can be say :  "tags" or "tag1,tag2,tag3" etc. on pageload.

I've included all the required scripts as well in cshtml file.

<script src="~/bower_components/bootstrap-tagsinput/dist/bootstrap-tagsinput.min.js"></script>    
<link href="~/bower_components/bootstrap-tagsinput/dist/bootstrap-tagsinput.css" rel="stylesheet" />
<link href="~/bower_components/bootstrap-tagsinput/dist/bootstrap-tagsinput-typeahead.css" rel="stylesheet" />

(i'm not missing something,right ?)

Also how can I customize the tags input area ? currently the tags come with blue color background. Please help.

Upvotes: 0

Views: 1792

Answers (2)

Hany Habib
Hany Habib

Reputation: 1405

To Add items you need to use :

$('#tagsdata').tagsinput('add', 'some tag');

So if you need multiple you can loop and add one by one. Here is alot of examples that will help you : https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/

You an give different class dependent on property here is working example from the site :

<script>
var elt = $('#tagsdata');
elt.tagsinput({
  tagClass: function(item) {
    switch (item.continent) {
      case 'Europe'   : return 'label label-primary';
      case 'America'  : return 'label label-danger label-important';
      case 'Australia': return 'label label-success';
      case 'Africa'   : return 'label label-default';
      case 'Asia'     : return 'label label-warning';
    }
  },
  itemValue: 'value',
  itemText: 'text'
});
elt.tagsinput('add', { "value": 1 , "text": "Amsterdam"   , "continent": "Europe"    });
elt.tagsinput('add', { "value": 4 , "text": "Washington"  , "continent": "America"   });
elt.tagsinput('add', { "value": 7 , "text": "Sydney"      , "continent": "Australia" });
elt.tagsinput('add', { "value": 10, "text": "Beijing"     , "continent": "Asia"      });
elt.tagsinput('add', { "value": 13, "text": "Cairo"       , "continent": "Africa"    });
</script>

Upvotes: 1

Shalini Raj
Shalini Raj

Reputation: 307

Thank you for looking into this question but i got a way to do so.. 

var temp = response.data.tags.split(",");
            for (var i = 0; i < temp.length; i++)
            {
                $('#tagsdata').tagsinput('add', temp[i]);
            }

Upvotes: 0

Related Questions