angularJS实现动态添加和删除div

html代码：

<table class="table table-striped text-center table-hover table-bordered">
        <thead>
            <tr>
                <th><span>data1</span></th>
                <th>data2</th>
                <th>data3</th>
                <th>Operation</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="pa in paramenters">
                <td>{{pa.data1}}</td>
                <td>{{pa.data2}}</td>
                <td>{{pa.data3}}</td>
                <td><span ng-click="deleteTablerow($index)">删除</span></td>
            </tr>
        </tbody>
    </table>
    <button ng-click="addTablerow1()">在末尾添加一行</button>
    <button ng-click="addTablerow2()">在开头添加一行</button>

js代码：

//add table row
     $scope.paramenters = [
      {data1: "data1",data2:"gege",data3:"fafsf"},
      {data1: "geg",data2:"dhdh",data3:"hshasdhd"}
    ];  
    $scope.addTablerow1 = function(){ 
      $scope.paramenters.splice($scope.paramenters.length + 1, 0, {
        data1:"",
        data2:"",
        data3:""
      });  
    } 
    $scope.addTablerow2 = function(){ 
      $scope.paramenters.splice(0, 0, {
        data1:"",
        data2:"",
        data3:""
      });  
    } 
    $scope.deleteTablerow = function ($index) {
      $scope.paramenters.splice($index, 1);  
    }