それぞれの削除ボタンをクリックして、テキストボックスを含むテーブルの行を削除する方法

私はtexboxを含む行を追加する追加ボタンがあります。しかし、私はそれぞれの削除ボタンをクリックしてテーブルの行を削除したい。ビューページのコードは次のようである：それぞれの削除ボタンをクリックして、テキストボックスを含むテーブルの行を削除する方法

<!DOCTYPE html> 

<html> 
<head> 
    <meta name="viewport" content="width=device-width" /> 
    <title>showintable</title> 
    <script src="~/scripts/jquery-3.1.1.min.js"></script> 
    <script src="~/scripts/angular.min.js"></script> 
    <script src="~/scripts/angular-messages.min.js"></script> 
    <script src="~/app/controller/checkCtrl.js"></script> 
    <script src="~/app/filter/filterrange.js"></script> 
</head> 
<body ng-app="app"> 
    <div ng-controller="sayCtrl"> 
     <table border="1"> 
      <tr> 
       <th>S. No.</th> 
       <th>Textbox1</th> 
       <th>Texbox2</th> 
      </tr> 
      <tr ng-repeat="v in [] | range:tellrange"> 
       <td>{{$index+1}}</td> 
       <td><input type="text" ng-model="Namemodel[$index]" /></td> 
       <td><input type="text" ng-model="Addressmodel[$index]" /></td> 
       <td><input type="button" ng-click="subtractrow()" value="Remove" /></td> 
      </tr> 
      <tr><td align="right" colspan="4"><input ng-click="addrow()" type="button" value="Add" /></td></tr> 
     </table> 
    </div> 
</body> 
</html>

angularjsのコントローラcheckCtrl.jsは次のようである：

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のフィルタfilterrange.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; 
    }; 
});

ページは次のようになります。

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

私はそれを検索しましたが、関連する回答を得ることができませんでした。どんな助けもありがとうございます。ありがとうございます..............

出典

2017-03-19 Hani Abidi

まず、行を繰り返し処理するのが簡単になります。 N個の行が必要で、各行には名前とアドレスという2つの情報が必要です。

2つの配列を使用しないでください。あなたが必要とするすべての行に反復する

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

、すべてのあなたですの行を追加するには

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

、：各行は名前とアドレスを持っている行の配列を、使用してください必要性は、見ての通り、あなたはremoveRow機能で削除する何行を渡す必要が

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

です。私は、各行が表すようになっているかを正確に知っていない

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

：

は、行を削除するには、あなたが必要とするすべては、$ scope.rowsでそのインデックスを検索し、そのインデックスを削除することです。私はそれがユーザーかもしれないと思います。たとえば、行の名前をユーザーに変更し、行をユーザーに自由に変更できます。物事を命名し、正しい、正しいモデルを持つことが鍵です。あなたのページにユーザーのテーブルが表示されます。名前と住所の2つのテーブルではありません。

出典

2017-03-19 14:42:53

それぞれの削除ボタンをクリックして、テキストボックスを含むテーブルの行を削除する方法

答えて

関連する問題