Javascript 在表格行中添加/删除输入框

不知何故，我无法在角度上理解这一点-我有一个表，想在单击时添加行，但这一行应该有空的输入框和一个按钮来删除自己

 <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>

测试1
200
添加新行
//我想在每次单击“添加新行”时动态添加此部件
//在删除时，它应该只删除该特定行
删除

---

我创建plunker只是为了展示我正在努力实现的目标。若有人能给我一个提示或链接到教程将是伟大的

请看一下这个小玩意儿

其想法是在末尾使用一行，该行的可见性可以控制。使用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>

---

看来你对这个问题一无所知。plunker没有应用程序或控制器。您所需要做的就是在想要添加行的任何位置放置一个

ng单击

，并使调用的函数向数据源添加一个项。查看任何基本的角度教程。对不起，如果我没有明确我自己之前。创建plunker只是为了更好地理解我的问题。有很多关于向表中添加行的教程。但是我的问题是关于在表中添加输入框的。您应该在plunker中完成设置，以便有人可以立即帮助您。谢谢，伙计：）。我快速查看了您的解决方案，新按钮仅适用于一个。但是付出了很大的努力。所以你想用文本框添加多个空行吗？是的，这就是我现在在实际代码中面临的问题：）。也许使用ngHtmlBind在这里会有所帮助。让我快速尝试一下。现在它可以实现添加多行所需的功能。请检查一下这个箱子。但是，在更新模型的文本输入值时存在一个问题。

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;
  };
}]);