首先说明一下功能需求:
当点击一次增加按钮的时候,下方就会多一行输入框;
当点击一次删除按钮的时候,所点击的删除按钮那行的输入框会消失;
当点击打印信息按钮的时候,把所有输入框中的数据读取出来,并打印到控制台上。
由此可看出,带有删除按钮的这部分DIV是动态的。
现在使用的是angularjs框架,那我们该如何去实现这样的功能呢?
angularjs有个很强大的功能,那就是双向数据绑定;
由此可以知道,我们就是要使用双向数据绑定的特性来实现它。
思路是这样的:
通过维护数组的方式来实现。
首先在angular控制器中创建一个数组,像这样:
$scope.showVBs = [];
当点击一次增加按钮的时候,就执行一次下方的方法:
$scope.BDetailsAdd = function(){
$scope.showVBs.push({});
}
当点击一次删除按钮的时候,就执行一次下方的方法:
$scope.BDetailsAdd = function(Count){
$scope.showVBs.splice(Count, 1);
}
当点击一次打印按钮的时候,就执行一次下方的方法:
通过遍历数组,取出里面的值
<p><span style="font-family: 'Anonymous Pro';"><span style="font-size:12px;">$scope.printInfo = function () {</span><