具有多个值的 Html 值属性答案

【问题标题】：Html value attribute having multiple values具有多个值的 Html 值属性
【发布时间】：2018-01-31 10:54:21
【问题描述】：

我是 Angular js 的新手。现在我有一个输入，我在其中实现了一个令牌字段。现在，输入框的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 调用。现在我有引导标记字段，所以我需要在该输入框中包含所有这些值。如何在 html 值属性中使用此数组值？

【问题讨论】：

您希望输入的值为abc, pqr, hhhh 吗？
是的，因为它是引导令牌

标签： javascript jquery html angularjs twitter-bootstrap

【解决方案1】：

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

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

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>

【讨论】：

我知道您也可以使用['abc','pqr','hhhh'].toString() 来做同样的事情，但join 在自定义分隔符方面提供了更多的灵活性。

【解决方案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>

【讨论】：

【解决方案3】：

尝试像转换成字符串（）一样

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

【讨论】：