Question

我有一个添加按钮，用于添加包含texbox的行。但是我想通过单击相应的删除按钮来删除表的行。视图页面代码如下：

angular.module('app', ['ngMessages']).controller('sayCtrl', SayController);
SayController.$inject = ['$scope', '$http'];
function SayController($scope, $http) {
    $scope.Namemodel = [];
    $scope.Addressmodel = [];
    $scope.tellrange = 1;
    $scope.addrow = function () {
        $scope.tellrange = $scope.tellrange + 1;
    };
    $scope.subtractrow = function () {

    };
}

angularjs的控制器checkCtrl.js是这样的：

angular.module('app').filter('range', function () {
    return function (input, total) {
        total = parseInt(total);

        for (var i = 0; i < total; i++) {
            input.push(i);
        }

        return input;
    };
});

angularjs的过滤器filterrange.js是这样的：

{% csrf_token %}

页面如下所示：

https://drive.google.com/open?id=0B8ZNi-QTxOOYUjNqcnlraDVydVE

我已经搜索过但我找不到相关的答案。任何帮助表示赞赏。提前致谢..............

Answer 1

首先，让迭代遍历行更容易。您想要N行，每行应该有两条信息：名称和地址。

所以不要使用两个数组。使用行中的一个数组，其中每行都有一个名称和地址：

$scope.rows = [
  {
    name: 'name 1',
    address: 'address 1'
  },
  {
    name: 'name 2',
    address: 'address 2'
  }
];

要添加一行，您只需要

$scope.rows.push({
  name: '',
  address: ''
});

要迭代行，您只需要

<tr ng-repeat="row in rows">
  <td>{{$index+1}}</td>
  <td><input type="text" ng-model="row.name" /></td>
  <td><input type="text" ng-model="row.address" /></td>
  <td><input type="button" ng-click="removeRow(row)" value="Remove" /></td>
</tr>

如您所见，您需要在removeRow函数中传递要删除的行。

要删除该行，您只需要在$ scope.rows中找到它的索引，然后删除该索引：

$scope.removeRow = function(row) {
  var index = $scope.rows.indexOf(row);
  $scope.rows.splice(index, 1);
}

我不确切地知道每一行应该代表什么。我想它可能是一个用户，例如，所以随意将行重命名给用户，然后行到用户。命名和拥有一个好的，正确的模型是关键。您的页面显示用户表。不是两个名称和地址表。

如何通过单击相应的删除按钮删除包含文本框的表的行

1 个答案: