javascript 将输入字段绑定到 Angularjs 中的数组
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28237163/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Binding input fields to Array in Angularjs
提问by ziz194
i have this simple problem that i can't really found a solution for it. so what i am willing to do is inserting to an array values from inputs.
我有这个简单的问题，我真的找不到解决方案。所以我愿意做的是从输入插入数组值。
so for example i have this empty array at my controller first :
所以例如我首先在我的控制器中有这个空数组：
$scope.contents = [
{name: "", value: ""}
] ;
and i have three input fields that each of them has a label and a 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' />
i want by clicking a button to add the label and the value of each input to the array and i want the ng-model name of the values and labels to be generated automatically so in the ng-model i want to put something like this ng-model=val[$index]that iterates
我想通过点击一个按钮来添加标签和每个输入到阵列的价值，我想在NG-模式，我希望把这样的事情将要产生的值和标签的NG-型号名称将自动使ng-model=val[$index]该迭代
so the result should be
所以结果应该是
$scope.contents = [
{label: "1st Label", value: "1st Value"},
{label: "2nd Label", value: "2nd Value"},
{label: "3rd Label", value: "3rd Value"}
] ;
Any help will be appreciated
任何帮助将不胜感激
回答by Michael Oryl
Given this HTML:
鉴于此 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>
And assuming you have a variable named myApp that has your main application, you'd make a controller like this:
假设您有一个名为 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);
}
});
Demo: http://plnkr.co/edit/JCCa1f?p=preview(Use your browser's Javascript console to see the values placed in the array)
演示：http: //plnkr.co/edit/JCCa1f?p=preview（使用浏览器的 Javascript 控制台查看放置在数组中的值）
That will wipe the $scope.contents array each time you press Save and then place three objects in it, one for each of your inputs.
每次按 Save 时都会擦除 $scope.contents 数组，然后在其中放置三个对象，每个输入一个。
I'm not sure why you'd want to do this, though, so if this isn't what you are looking for, perhaps you could expand on your question a bit to make your problem and needs a bit more clear.
不过，我不确定您为什么要这样做，所以如果这不是您想要的，也许您可以稍微扩展一下您的问题以使您的问题更清楚一些。
回答by Bardh Lohaj
Initialize the contents variable with initial values:
使用初始值初始化内容变量：
$scope.contents = [
{name: "Label 1", value: ""},
{name: "Label 2", value: ""},
{name: "Label 3", value: ""}
] ;
Generate the input fields with a form such as:
使用以下形式生成输入字段：
<div ng-repeat="content in contents">
<label>{{content.name}}</label>
<input type='text' value='{{content.value}}' ng-model="content.value"/>
</div>
At the end you don't need the saveEverything because the content.values' will be bound with the $scope.contents variable therefore when the value is changed on an input field than the value on the contents variable will be up to date.
最后，您不需要 saveEverything，因为 content.values' 将与 $scope.contents 变量绑定，因此当输入字段上的值更改时，内容变量上的值将是最新的。
