Angularjs以各种形式动态添加表单字段

使用ng-repeat我创建了一堆带有值的表单。 每个表单都有一个按钮，可以将新行添加到特定表单中。 代码如下

HTML：

<form name="{{form.name}}"
      ng-repeat="form in forms">          
  <h2>{{form.name}}</h2>
  <div ng-repeat="cont in form.contacts">
          <input type="text" class="xdTextBox" ng-model="cont.ac"/>
          <input type="text" class="xdTextBox" ng-model="cont.a_number"/>
          <input type="text" class="xdTextBox" ng-model="cont.p_id"/>             
  </div>
  <button ng-click="submit(form)">Submit</button>
  <button ng-click="addFields(form)">Add</button>
  <hr>
</form>

使用Javascript：

var app = angular.module('plunker', []);
    app.controller('MainCtrl', function($scope) {

        $scope.forms = [{
          "name" : "form1", "ac": 251, "a_number": "7933", "p_id": 33
        }, {
           "name": "form2", "ac": 252, "a_number": "7933", "p_id": 4
        }, {
           "name": "form3", "ac": 253, "a_number": "7362", "p_id": 3
        }];


        $scope.addFields = function (form) {        
            form.contacts.push({name:'', ac: '', a_number: '', p_id: '' });
        }

        $scope.submit = function(form){
          console.log(form.contacts);
        }
    });

它不工作。 这是它的掠夺者：http://plnkr.co/edit/THdtLgkwKrV7imqZGjL2?p=preview

这是它应该如何看待（差异是从数据库收到的数据对象与以前提出的问题有点不同）：http://plnkr.co/edit/fETiSYVW7Y5C1yTCwizd?p=preview请让我知道问题出在哪里。 谢谢

---

你的addFields方法是个问题。 只要为form.contacts未定义时添加一个大小写，并将其设置为空数组。 或者使每个表单项都以联系人键设置为空数组开始。

$scope.addFields = function (form) {
  if(typeof form.contacts === 'undefined') {
    form.contacts = [];
  }
  form.contacts.push({name:'', ac: '', a_number: '', p_id: '' });
}

在你的胖子的这个分支中与变化一起工作。

Angular还有一个帮助函数，用于确定什么时候你可能想要使用某个东西，但我不知道它是否真的有什么区别。

angular.isUndefined(form.contacts)

链接地址: http://www.djcxy.com/p/19287.html

上一篇: Angularjs adding dynamically form fields in various forms

下一篇: Resources returns a Drawable of the wrong type