Question

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

这是我的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模型以将数据保存在数据库中？

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'}]

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

1 个答案: