如何使用 ng-model 和 ng-repeat 绑定数据（在表单内）

Question

我有一个角度范围变量，它是一个对象数组并绑定到一个表单组，当单击一个按钮时，它会创建一个用户可以填写的新表单组。每个表单组包含两个字段名称和编号.我试图找出将表单中的表单字段绑定到数组中对象中的数据的方法。只是以防万一，我想要一个具有动态数量的字段的表单，这些字段绑定到范围内的数组中的对象。

这是我的代码

在控制器中；

    $scope.choices = [{name: 'thename1', number:"10"}];


    // This function adds aditional nutrients
    $scope.addChoice = function() {
        var newItemNo = $scope.choices.length+1;
        $scope.choices.push({'name':'choice'+newItemN, number""});
        console.log(JSON.stringify$scope.choices));
    };

在我看来，我有以下代码

                    <fieldset data-ng-repeat="choice in choices">
                        <legend>Choice</legend>
                        <!-- START row -->
                        <div class="row" >
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>Name</label>
                                    <input type="text" ng-model="choice.name" name="name" placeholder="Test" class="form-control" />
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>Target Volume (ml/l)</label>
                                    <input type="text" ng-model="choice.number" name="target-volume" placeholder="132" class="form-control" />
                                </div>
                            </div>
                        </div>
                        <!-- END row -->
                    </fieldset>
                    <div> Testing
                        <button type="button" class="mb-sm btn btn-pink"  ng-click="addChoice()">Add Another Choice</button>
                    </div>

编辑

好的，所以它按预期工作，但是当我尝试保存结果时，例如如果我有一个创建函数，它会失败

    $scope.create = function() {
        console.log('this.choices' + JSON.stringify(this.choices));

}

第一个控制台日志记录了正确的对象，而创建函数中的那个没有。我错过了什么吗？我也在第二个函数中尝试了 $scope.choices 但它不起作用

Answer 1

只需将新变量推送到数组即可。即使是空的对象就足够了。看下面的实现

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

app.controller('formController', function($scope) {
  $scope.choices = [{}];

  $scope.addChoice = function() {
    $scope.choices.push({});

    console.log($scope.choices);
  };

  $scope.submitChoices = function() {
    console.log($scope.choices);
    $scope.submittedChoices = angular.copy($scope.choices);
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="formController">
  <fieldset data-ng-repeat="choice in choices track by $index">
    <legend>Choice</legend>
    <div class="row">
      <div class="col-md-6">
        <div class="form-group">
          <label>Name</label>
          <input type="text" ng-model="choice.name" name="name" placeholder="Test" class="form-control" />
        </div>
      </div>
      <div class="col-md-6">
        <div class="form-group">
          <label>Target Volume (ml/l)</label>
          <input type="text" ng-model="choice.number" name="target-volume" class="form-control" />
        </div>
      </div>
    </div>
  </fieldset>
  <div>
    <button type="button" class="mb-sm btn btn-pink" ng-click="addChoice()">Add Another Choice</button>
    <hr/>
    <button type="button" class="mb-sm btn btn-pink" ng-click="submitChoices()">Submit Choices</button>
    <div>
      <pre>{{submittedChoices | json: 2}}</pre>
    </div>
  </div>
</div>

Answer 2

Here 正在工作 Plunker。

那里只有几个错别字：

$scope.choices.push({'name':'choice'+newItemNo, number: 10});

当你有的时候：

$scope.choices.push({'name':'choice'+newItemN, number""10});

newItemN 未定义，number""10 - 语法无效