Question

我是棱角分明的新手。现在我有一个输入，我已经实现了一个令牌字段。现在，输入框的value属性具有数组中的值。现在我不知道如何使用array in the html。像

value="abc,pqr"

这样可行，但我有一个数组，我需要在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'];

此值来自ajax调用。现在我有bootstrap tokenfield，所以我需要在该输入框中包含所有这些值。如何在html值atttibute中使用此数组值？

Answer 1

为了澄清，你有一个来自ajax调用的值数组，但你希望它们以逗号分隔为字符串吗？

您想使用join功能。这会将数组中的所有元素组合成一个字符串，由字符串作为参数（在本例中为逗号）分隔。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

您应该更好地描述您想要做的事情。

但是，你可以加入数组：["abc", "pqr", "hhhh"].join(',')，它会给你"abc,pqr,hhhh"。

如果您希望它出现在<input>中，请向其添加ng-model="value"，然后将其填充到您的控制器中：$scope.value = ...;。这是一个演示：

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>

Answer 3

尝试将tostring（）转换为

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

来自@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值属性

3 个答案: