angularjs 动态添加输入控件并绑定数据

最近项目中遇到个难题，关于动态添加输入控件的问题：

需求：如下图所示，点击加号的时候可以添加一整行内容，包括里面的input输入控件。

这里是用ng-repeat实现的，代码如下：

<tr ng-repeat="enq in enquiry.enquiries track by $index" name="enquiry_tr">        <td class="enquiry_region_input"><input id="enq{{$index + 1}}" name="enq{{$index + 1}}" ng-model="$ctrl.list.data1[$index+1]" type="text" >~<input ng-model="$ctrl.list.data2[$index+1]" type="text" ></td><td class="enquiry_num_in"><input  ng-model="$ctrl.list.data3[$index+1]" type="text"></td><td><img src="../../../../resource/images/equiry_add.png" ng-click="$ctrl.addEnquiry($index)"><img src="../../../../resource/images/enquiry_add_delete.png" ng-click="$ctrl.deleteEnquiry($index)"></td></tr>

在controller.js里面做处理：

1.初始化：

$onInit(){ this.$scope.enquiry = {}; this.$scope.enquiry.enquiries = [{key: 0, value: ""}];}

2.添加

addEnquiry($index){    // debugger;    var leng = this.$scope.enquiry.enquiries.length;    console.log(leng,'列表');    if(leng>=4){    this.alertTip.error('已经20条了，不能添加了哦')    return;    }else{    this.$scope.enquiry.enquiries.splice($index + 1, 0,{key: $index + 1, value: ""});    }    }

3.删除

deleteEnquiry($index){    // debugger    var leng = this.$scope.enquiry.enquiries.length;    if(leng<=1){    this.alertTip.error('已经是最后一条了，不能删除了');    return;    }else{    this.$scope.enquiry.enquiries.splice($index ,1);    }        }

4.获取数据

可以通过input绑定的ng-model获取：

var list = this.list;

以上就可以实现动态添加输入控件了。