Html value attribute having multiple values

Question

I am new to angular js. Now I have an input where I have implemented a token field. Now, the value attribute of the input box has values in an array. Now I don't know how we can use that array in the html. Like

value="abc,pqr"

This works , But I have an array and that array I need to use in the html.

<div class="form-group">
    <label for="inputEmail3" class="col-sm-2">Should</label>
    <div class="col-xs-5">
        <input name="should" 
            id="should" 
            type="text"
            value="" 
            placeholder="should requirement" 
            class="form-control setmargin">
    </div>
</div>

$scope.somevalues = ['abc','pqr','hhhh'];

This values are coming from the ajax call. Now I have bootstrap tokenfield so I need to have all this values in that input box . How can I use this array values in the html value atttibute ?

You want the value of the input to be `abc, pqr, hhhh` ? – Turnip Jan 31 '18 at 10:57 — Turnip, Jan 31 '18 at 10:57
yes As it is the bootstrap-token – ganesh kaspate Jan 31 '18 at 11:04 — ganesh kaspate, Jan 31 '18 at 11:04

score 1 · Answer 1 · answered Jan 31 '18 at 11:01

To clarify, you have an array of values coming from an ajax call, but you would like them to be comma-separated as a string?

You want to use the join function. This will combine all the elements in the array into a string, separated by the string as the parameter (in this case, a comma).

var somevar = ['abc','pqr','hhhh'].join(',');
document.getElementById('should').value = somevar;

<div class="form-group">
    <label for="inputEmail3" class="col-sm-2">Should</label>
    <div class="col-xs-5">
        <input name="should" 
            id="should" 
            type="text"
            value="" 
            placeholder="should requirement" 
            class="form-control setmargin">
    </div>
</div>

I am aware that you could also use `['abc','pqr','hhhh'].toString()` to do the same thing, but `join` gives a bit more flexibility in terms of custom separators. — Richard Parnaby-King, Jan 31 '18 at 11:05

score 1 · Answer 2 · answered Jan 31 '18 at 11:07

You should describe it better what you want to do.

But, you can join the array: ["abc", "pqr", "hhhh"].join(','), which will give you "abc,pqr,hhhh".

If you want that to appear in your <input>, then add ng-model="value" to it, and populate it in your controller: $scope.value = ...;. Here is a demo:

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.somevalues = ['abc', 'pqr', 'hhhh'];
  $scope.value = $scope.somevalues.join(',');
  
  $scope.toArray = function(){
    $scope.somevalues = angular.copy($scope.value.split(','));
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>


<div ng-app="myApp" ng-controller="myCtrl">

  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2">Should</label>
    <div class="col-xs-5">
      <input name="should" id="should" type="text" ng-model="value" ng-change="toArray()" placeholder="should requirement" class="form-control setmargin">
      <div>To string: {{value}}</div>
    </div>
    <div>To array: {{somevalues}}</div>
  </div>

</div>

score 1 · Answer 3 · answered Jan 31 '18 at 11:11

try to convert tostring() like

$scope.somevalues = ['abc', 'pqr', 'hhhh'].toString();

Copied Snippet from @richard

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.somevalues = ['abc', 'pqr', 'hhhh'].toString();    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>


<div ng-app="myApp" ng-controller="myCtrl">

  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2">Should</label>
    <div class="col-xs-5">
      <input name="should" id="should" type="text" ng-model="somevalues" placeholder="should requirement" class="form-control ">          
    </div>
  </div>

</div>

Html value attribute having multiple values

3 Answers3