AngularJs 在ng-repeat中动态使用ng-model进行双向数据绑定

首先说明一下功能需求：

当点击一次增加按钮的时候，下方就会多一行输入框；

当点击一次删除按钮的时候，所点击的删除按钮那行的输入框会消失；

当点击打印信息按钮的时候，把所有输入框中的数据读取出来，并打印到控制台上。

由此可看出，带有删除按钮的这部分DIV是动态的。

现在使用的是angularjs框架，那我们该如何去实现这样的功能呢？

angularjs有个很强大的功能，那就是双向数据绑定；

由此可以知道，我们就是要使用双向数据绑定的特性来实现它。

思路是这样的：

通过维护数组的方式来实现。

首先在angular控制器中创建一个数组，像这样：

$scope.showVBs = [];

当点击一次增加按钮的时候，就执行一次下方的方法：

$scope.BDetailsAdd = function(){
	$scope.showVBs.push({});
}

当点击一次删除按钮的时候，就执行一次下方的方法：

$scope.BDetailsAdd = function(Count){
	$scope.showVBs.splice(Count, 1);
}

当点击一次打印按钮的时候，就执行一次下方的方法:

通过遍历数组，取出里面的值

$scope.printInfo = function () {
        for (var i = 0; i < $scope.showVBs.length; i++) {
            console.log($scope.showVBs[i]);
        }
    };
 
  
 
  
 html的代码如下： 
  
 
  

    

        {{'Details'}}
        
        
    
    

        

            
            
        
        

            
        
        

            
        
    
 
  
 
  
 
  
 
  
 
  
完整的源码：
 
  
 
  

<%@ page contentType="text/html;charset=UTF-8" language="java" %>


    
    
    
    




    

        

            

                

                    {{'Details'}}
                    
                    
                
                

                    

                        
                        
                    
                    

                        
                    
                    

                        
                    
                
            
        
    

 
  
/**
 * Created by wzs on 2015/9/6 0006.
 */
var App = angular.module('App', [])
App.controller('EditCtrl', ['$scope', function ($scope) {
    //================测试代码段================
    $scope.printInfo = function () {
        for (var i = 0; i < $scope.showVBs.length; i++) {
            console.log($scope.showVBs[i]);
        }
    };

    $scope.showVBs = [{
        "Tag": "Tag1",
        "NO": "No1",
        "remarks": "remarks1"
    }, {
        "Tag": "Tag2",
        "NO": "No2",
        "remarks": "remarks2"
    }];
    $scope.BDetailsAdd = function () {
        $scope.showVBs.push({});
    };
    $scope.BDetailsDel = function (Count) {
        $scope.showVBs.splice(Count, 1);
    };