将输入字段绑定到Angularjs中的Array

时间:2015-01-30 13:39:58

标签: 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-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"}
    ] ; 

任何帮助将不胜感激

2 个答案:

答案 0 :(得分:5)

鉴于此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数组,然后在其中放置三个对象,每个输入一个。

我不确定你为什么要这样做,所以如果这不是你想要的,也许你可以稍微扩展你的问题来解决问题,需要更清楚一些

答案 1 :(得分:5)

使用初始值初始化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变量绑定,因此当输入字段上的值改变而不是内容变量上的值将达到日期。