动态添加/删除输入框到Angular中的表格行

Question

不知何故，我无法理解这个问题——我有一个表格，想在点击时添加该行，但该行应该有空输入框和一个用于删除自身的按钮。

 <tbody>
        <tr>
            <th>Test 1</th>
            <th>200</th>
            <th>Add new row</th>
        </tr>
         //I want to Add this part dynamically everytime when I click on Add new row
                <tr>
                     <td>
                        <input type="text" placeholder="Please Enter the Address">
                    </td>
                    <td>
                        <input type="text" placeholder="Number of Quantity">
                    </td>
         //On Delete it should delete just that particular row
                    <td>Delete</td>
                </tr>

        </tbody>

我创建了 plunker http://plnkr.co/edit/DDj5Z99tw1QuN8xlxZ7V?p=preview 只是为了展示我想要实现的目标。如果有人能够给出提示或将我链接到教程会很棒！

Answer 1

请看看这个 plunker。

http://plnkr.co/edit/ogvezWz6WDwDhCnm2bDU

想法是在末尾使用可以控制可见性的行。并且使用 ngRepeat 您可以迭代地显示您添加的产品项。

    <tr ng-repeat="row in rows">
         <td>
            {{row.product}}
        </td>
        <td>
            {{row.quantity}}
        </td>
        <td>
          <button ng-click="deleteRow($index)">Delete</button>
          <button ng-click="addNewRow()">New</button>
        </td>
    </tr>
    <tr ng-show="addrow">
         <td>
            <input type="text" placeholder="Please Enter the Address" ng-model="product"/>
        </td>
        <td>
            <input type="text" placeholder="Number of Quantity" ng-model="quantity"/>
        </td>
        <td><button ng-click="save()">Save</button> <button ng-click="delete()">Delete</button></td>
    </tr>

还有控制器代码

angular.module('AddRow', [])
.controller('MainCtrl', [
'$scope', function($scope){
  $scope.rows = [ { "product": "Test 1", "quantity": "200"}];
  $scope.addrow = false;

  $scope.addNewRow = function(){
    $scope.addrow = true;
  };

  $scope.deleteRow = function(index){
    //delete item from array
    $scope.rows.splice(index,1);
  };

  $scope.save = function(){
    //add item to array
    $scope.rows.push({"product": $scope.product, "quantity": $scope.quantity});
    //reset text input values
    $scope.product = "";
    $scope.quantity = "";
    //hide the add new row
    $scope.addrow = false;
  };

  $scope.delete = function(){
    $scope.addrow = false;
  };
}]);