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

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/chongchong1325/article/details/77748361

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

需求：如下图所示，点击加号的时候可以添加一整行内容，包括里面的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;

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