在Angularjs中将输入字段绑定到数组答案

【问题标题】：Binding input fields to Array in Angularjs在Angularjs中将输入字段绑定到数组
【发布时间】：2015-01-30 13:39:58
【问题描述】：

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

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

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

我想通过单击一个按钮将每个输入的标签和值添加到数组中，并且我希望自动生成值和标签的 ng-model 名称，因此我想在 ng-model 中放置一些东西像这样迭代的ng-model=val[$index]

所以结果应该是

   $scope.contents =  [
        {label: "1st Label", value: "1st Value"},
        {label: "2nd Label", value: "2nd Value"},
        {label: "3rd Label", value: "3rd Value"}
    ] ;

任何帮助将不胜感激

【问题讨论】：

标签： javascript arrays angularjs

【解决方案1】：

鉴于此 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>

假设您有一个名为 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);
  }
});

演示：http://plnkr.co/edit/JCCa1f?p=preview（使用浏览器的 Javascript 控制台查看放置在数组中的值）

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

不过，我不确定您为什么要这样做，所以如果这不是您想要的，也许您可以稍微扩展您的问题以使您的问题更清楚.

【讨论】：

这几乎是我想要的，但我希望自动生成值和标签的 ng-model 名称，所以在 ng-model 中我想放置类似这样的 ng-model= val[$index] 迭代
您是说要从某个列表或范围生成实际表单吗？我只是不知道你要去哪里（或者你来自哪里）。您是否正在尝试从没有 Angular 绑定之类的表单中捕获数据？也许 Plnkr.co 上的演示会有所帮助。
好的，告诉我来自哪里会让事情变得有点复杂，但我会尝试我来自一个 ng-include，它每次加载一个包含每次的不同外部 html 代码不同的输入。所以我不知道输入的确切数量。清楚了吗？
好的，看看答案中更新的 plunk。它使用 ng-repeat 从标签列表中创建表单，然后将所需的带有标签和值的对象放入数组中。我想这就是你所要求的。

【解决方案2】：

用初始值初始化内容变量：

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

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

【讨论】：

是的，如果他的列表以这种形式出现，或者如果他将输入数组/列表映射到这种形式（很容易做到），情况就是如此。这是一个简洁明了的代码。我给了他这个按钮，因为他要求一个可以保存的按钮。您并不总是想要实时更新 - 有时您希望能够取消更新。
在这种情况下，我会将表单（输入元素）与辅助内容数组绑定，单击该辅助内容数组将保存在主内容数组中，而不是单独绑定键 + 值，跟踪索引，然后将它们存储在最终数组中。