从 angular 中动态添加的表单中获取数据

Question

我正在使用 MEAN 堆栈开发应用程序。我能够动态添加表单元素，但无法在我的 ng-model 中获取插入的数据。如果我放 ng-model="something.something" 那么每个动态添加的表单元素都采用相同的数据。我希望以 array.I 中的对象形式获取数据，非常感谢任何回复。

这是我的 html 代码：

  <div layout-gt-sm="row" ng-repeat="(key,aca) in vm.academic">
                <md-input-container class="md-block" flex-gt-sm>
                    <label>Degree</label>
                    <input name="degree" ng-model="vm.academic[key].degree">
                </md-input-container>
                <md-input-container class="md-block" flex-gt-sm>
                    <label>University/Board</label>
                    <input name="university" ng-model="vm.academic[key].university">
                </md-input-container>
                <md-input-container class="md-block" flex-gt-sm>
                    <label>Percentage/Grade</label>
                    <input name="grade" ng-model="vm.academic[key].grade">
                </md-input-container>
            </div>
            <div layout="row" layout-align-gt-sm="end">
                <md-button class="btn1" aria-label="add button" ng-click="vm.add();">
                    <md-icon md-svg-icon="plus"></md-icon>
                    <md-tooltip md-direction="top">
                       Add more field
                    </md-tooltip>
                </md-button>
            </div>

我的js代码是

   vm.academic = [{}];
   vm.add = add;

    function add() {
    console.log('button clicked');
    vm.academic.push({
        degree:'',
        university:'',
        grade:''
    });
};

如何为不同的字段获取不同的 ng-model 以将数据保存在数据库中？

Answer 1

这是 html 代码，可以帮助您格式化 html

 <form name="FormName" novalidate>
        <div layout-gt-sm="row" ng-repeat="aca in vm.academic">
            <md-input-container class="md-block" flex-gt-sm="">
                <label>Name</label>
                <input type="text" ng-model="aca.name" >
            </md-input-container>
            <md-input-container class="md-block" flex-gt-sm="">
                <label for="email">Email Id</label>
                <input type="email" ng-model="aca.email"/>
            </md-input-container>
        </div>
    </form>

然后在你的控制器中初始化 vm.academic = [{}]; 并按如下方式调用添加和删除方法

vm.addNewAcademic = function(){
   vm.academic.push({});
};
vm.removeAcademic = function() {
   var num = vm.academic.length-1;
   if ( num !== 0 ) {
      vm.academic.pop();
   }
};

您将得到输出结果 [{'name':'a','email':'bb'},{'name':'c','email':'dd'}]

从 angular 中动态添加的表单中获取数据

getting data from dynamically added form in angular

javascript

mean

angularjs

mean-stack