How to show multiple values in an input element using Angular JS

Question

I have an array of months like this

Array[0]
0
:
"January"
1
:
"February"
2
:
"March"

Now I need to show all three values of this array in one input element. like

How can I do this using angular js. Please help

here's the html

<div class="col-md-4">
                <div asterick class="form-group" ng-class="{'form-group has-success': !error['months'] && (submitted), 'form-group has-error': (error['months']) && (submitted)}">
                    <label for="months">Months</label>
                    <input type="hidden" name="year" ng-model="data.year" value="">
                    <input type="text" name="months" id="months" ng-model="data.months" class="form-control" ng-required="true">
                    <span class="er-block" ng-show="monthlyReportFormPage.months.$touched && monthlyReportFormPage.months.$error.required">Please select months.</span>
                    <span ng-show="error.months" class="er-block">{{error.months}}</span>
                </div>
            </div>

Make a try and then post your code and ask a question about that. Sorry but writing your code isn't our task. — Rene M., Apr 03 '17 at 11:17
I have updated my question @sachila. sorry for late I was busy — Ramkishan Suthar, Apr 03 '17 at 11:39

Alex Romanov · Answer 1 · 2019-05-31T09:20:23.220

There're plenty of options:

I would recommend to take a look at Bootstrap Tags Input.

HTML:

<input type="text" value="html,input,tag" data-role="tagsinput"></input>

CSS:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="http://bootstrap-tagsinput.github.io/bootstrap-tagsinput/dist/bootstrap-tagsinput.css">

JS:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://bootstrap-tagsinput.github.io/bootstrap-tagsinput/dist/bootstrap-tagsinput.min.js"></script>

RESULT:

OR jQuery Tags Input Plugin by XOXCO:
OR you can do it using pure javascript. Here's an example.

score 0 · Answer 2 · answered Apr 03 '17 at 11:24

Hey in case you work with angular 1.X try the ui-select plugin (https://github.com/angular-ui/ui-select/wiki). I think its exactly what you are looking for. Here are some examples https://angular-ui.github.io/ui-select/demo-multiple-selection.html.

best regards Peter

How to show multiple values in an input element using Angular JS

2 Answers2