ziz*_*194 3 javascript arrays angularjs
我有这个简单的问题,我无法真正找到解决方案.所以我愿意做的是从输入插入数组值.
所以例如我首先在我的控制器上有这个空数组:
$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-模式,我希望把这样的事情将自动生成的值和标签的NG-型号名称ng-model=val[$index]是迭代
所以结果应该是
$scope.contents = [
{label: "1st Label", value: "1st Value"},
{label: "2nd Label", value: "2nd Value"},
{label: "3rd Label", 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>
假设您有一个名为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数组,然后在其中放置三个对象,每个输入一个.
我不确定你为什么要这样做,所以如果这不是你想要的,也许你可以稍微扩展你的问题来解决问题,需要更清楚一些.
使用初始值初始化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>
最后,您不需要saveEverything,因为content.values'将与$ scope.contents变量绑定,因此当输入字段上的值更改时,content变量上的值将是最新的.
| 归档时间： |
|
| 查看次数： |
18609 次 |
| 最近记录： |