Javascript 将输入字段绑定到Angularjs中的数组_Javascript_Arrays_Angularjs

Javascript 将输入字段绑定到Angularjs中的数组

javascript arrays angularjs

Javascript 将输入字段绑定到Angularjs中的数组,javascript,arrays,angularjs,Javascript,Arrays,Angularjs,我有一个简单的问题，我真的找不到解决办法。所以我愿意做的是从输入中插入一个数组值例如，我的控制器上首先有一个空数组： $scope.contents = [ {name: "", value: ""} ] ; 我有三个输入字段，每个字段都有一个标签和一个值： <label>1st Label</label> <input type='text' value='1st Value' /> <label>

我有一个简单的问题，我真的找不到解决办法。所以我愿意做的是从输入中插入一个数组值

例如，我的控制器上首先有一个空数组：

   $scope.contents =  [
    {name: "", value: ""}
 ] ;

我有三个输入字段，每个字段都有一个标签和一个值：

    <label>1st Label</label>
    <input type='text' value='1st Value' />

    <label>2nd Label</label>
    <input type='text' value='2nd Value' />

    <label>3rd Label</label>
    <input type='text' value='3rd Value' />

如果您有以下HTML，我们将不胜感激

：

  <body ng-controller="MyController">
    <label ng-repeat-start="label in labels">Label {{label}}</label>
    <input ng-model='values[$index]' type='text' value='' />
    <br ng-repeat-end>

    <button ng-click="saveEverything()">Save</button>
  </body>


标签{{Label}


拯救

假设您有一个名为myApp的变量，该变量包含您的主应用程序，您可以创建如下控制器：

var myApp = angular.module('app', []);

myApp.controller('MyController', function($scope, $log) {
  $scope.labels = ['one', 'two', 'three'];
  $scope.values = new Array($scope.labels.length);

  $scope.saveEverything = function() {
    $scope.contents = [];
    for (i = 0; i < $scope.labels.length; i++) {
      $scope.contents.push({
        label: $scope.labels[i],
        value: $scope.values[i]
      });
    }
    $log.info('Saved to array[0]: ' + $scope.contents[0].value);
    $log.info('Saved to array[1]: ' + $scope.contents[1].value);
    $log.info('Saved to array[2]: ' + $scope.contents[2].value);
  }
});

var myApp=angular.module（'app'，[]）；
myApp.controller（'MyController'，函数（$scope，$log）{
$scope.labels=['one'，'two'，'three']；
$scope.values=新数组（$scope.labels.length）；
$scope.saveEverything=function（）{
$scope.contents=[]；
对于（i=0；i<$scope.labels.length；i++）{
$scope.contents.push({
标签：$scope.labels[i]，
值：$scope.values[i]
});
}
$log.info（'保存到数组[0]：'+$scope.contents[0].value）；
$log.info（'保存到数组[1]：'+$scope.contents[1].value）；
$log.info（'保存到数组[2]：'+$scope.contents[2].value）；
}
});

演示：（使用浏览器的Javascript控制台查看数组中的值）

这将在每次按Save时擦除$scope.contents数组，然后在其中放置三个对象，每个对象对应一个输入

不过，我不确定您为什么要这样做，因此，如果这不是您想要的，也许您可以对您的问题进行一点扩展，以使您的问题更加清楚，并且需要更清楚一些。

使用初始值初始化contents变量：

$scope.contents =  [
    {name: "Label 1", value: ""},
    {name: "Label 2", value: ""},
    {name: "Label 3", value: ""}
 ] ;

使用以下表单生成输入字段：

<div ng-repeat="content in contents">
    <label>{{content.name}}</label>
    <input type='text' value='{{content.value}}' ng-model="content.value"/>
</div>


{{content.name}

最后，您不需要saveEverything，因为content.values'将与$scope.contents变量绑定，因此当输入字段上的值更改时，contents变量上的值将是最新的。

这正是我想要的，但是我希望自动生成值和标签的ng模型名称，所以在ng模型中，我想放一些类似于ng model=val[$index]的东西，它可以迭代，你是说你希望从某个列表或范围生成实际的表单吗？我只是看不出你要做什么（或者你从哪里来）。您是否正在尝试从没有角度绑定或其他内容的表单捕获数据？也许Plnkr.co上的一个演示会有所帮助。好吧，告诉我从哪里来会让事情变得有点复杂，但我会尝试一下，我来自一个ng include，每次都加载一个不同的外部html代码，每次都包含不同的输入。所以我不知道输入的确切数量。明白了吗？好的，看看答案中更新的plunk。它使用标签列表中的ng repeat创建表单，然后将带有标签和值的所需对象放入数组中。我想这就是你要求的。是的，如果他的列表以这种形式出现，或者如果他将输入数组/列表映射到这种形式（很容易做到），这是正确的。这是一段漂亮而简洁的代码。我把按钮给了他，因为他要的是一个可以保存的按钮。您并不总是希望实时更新—有时您希望能够取消更新。在这种情况下，我会将表单（输入元素）绑定到一个辅助内容数组中，该数组单击后将保存在主内容数组中，而不是单独绑定键+值，跟踪索引，而不是将它们存储在最终数组中。

<div ng-repeat="content in contents">
    <label>{{content.name}}</label>
    <input type='text' value='{{content.value}}' ng-model="content.value"/>
</div>