テーブルの行を動的に追加/削除する

Question

私は、angleJSの行を追加/削除するためのブートストラップ・モダルの表を実装したいと思います。ここではIMGの例：

まもなく、私は最後のボタン上の行の多くを追加したいが、他のバックを削除します。どのように角を行うには？今の私は、次の操作を行います。
HTML

<table> 
<tbody> 
    <tr ng-repeat="row in rows"> 
     <td ng-bind-html="row.SocietyBorrower" angular-compile="nRows">&emsp;</td> 
     <td><label class="fs-label">{{fsFactory.getLabel(labels, pageName, 'Form_Label_NDGSocieta')}}</label></td> 
     <td>&emsp;&emsp;&emsp;</td> 
     <td ng-bind-html="row.NDGSociety" angular-compile="nRows"></td> 
     <td ng-show="row.LastRow"> 
      <a href="#" ng-click="addNewRow()" class="fs-form-plus-minus"><span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span></a> 
     </td> 
     <td ng-hide="row.LastRow"> 
      <a href="#" ng-click="deleteRow($index)" class="fs-form-plus-minus"><span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span></a> 
     </td> 
    </tr> 
    <tr><td></td></tr> 
</tbody> 

AngularJS

どれが示唆

$scope.rows = [{ 
    "SocietyBorrower": $sce.trustAsHtml("<input type=\"text\" ng-class=\"{'fs-form-invalid' : fsFactory.checkHasError(errors, 'SocietyBorrower')}\" name=\"SocietyBorrower\" class=\"fs-form-table-society\" ng-model=\"subItem.SocietyBorrower\" ng-model-options=\"defaultNgOptions\" />"), 
    "NDGSociety": $sce.trustAsHtml("<input type=\"text\" ng-class=\"{'fs-form-invalid' : fsFactory.checkHasError(errors, 'NDGSociety')}\" name=\"NDGSociety\" class=\"fs-form-table-ndg\" ng-model=\"subItem.NDGSociety\" ng-model-options=\"defaultNgOptions\" />"), 
    "LastRow": false 
}]; 

$scope.nRows = $scope.rows.length; 

$scope.addNewRow = function() { 
    $scope.rows.push({ 
     "SocietyBorrower": $sce.trustAsHtml("<input type=\"text\" ng-class=\"{'fs-form-invalid' : fsFactory.checkHasError(errors, 'SocietyBorrower')}\" name=\"SocietyBorrower\" class=\"fs-form-table-society\" ng-model=\"subItem.SocietyBorrower\" ng-model-options=\"defaultNgOptions\" />"), 
     "NDGSociety": $sce.trustAsHtml("<input type=\"text\" ng-class=\"{'fs-form-invalid' : fsFactory.checkHasError(errors, 'NDGSociety')}\" name=\"NDGSociety\" class=\"fs-form-table-ndg\" ng-model=\"subItem.NDGSociety\" ng-model-options=\"defaultNgOptions\" />"), 
     "LastRow": true 
    }); 
    $scope.nRows++; 

}; 

$scope.deleteRow = function (index) { 
    if ($scope.nRows < 1) { 
     $scope.rows.splice(index, 1); 
     $scope.rows.push({ 
      "SocietyBorrower": $sce.trustAsHtml("<input type=\"text\" ng-class=\"{'fs-form-invalid' : fsFactory.checkHasError(errors, 'SocietyBorrower')}\" name=\"SocietyBorrower\" class=\"fs-form-table-society\" ng-model=\"subItem.SocietyBorrower\" ng-model-options=\"defaultNgOptions\" />"), 
      "NDGSociety": $sce.trustAsHtml("<input type=\"text\" ng-class=\"{'fs-form-invalid' : fsFactory.checkHasError(errors, 'NDGSociety')}\" name=\"NDGSociety\" class=\"fs-form-table-ndg\" ng-model=\"subItem.NDGSociety\" ng-model-options=\"defaultNgOptions\" />") 
     }); 
    } else { 
     $scope.rows.splice(index, 1); 
     $scope.nRows = $scope.rows.length; 
    } 
}; 

？私はng-hide/ng-showの最後の行で追加/削除ボタンを表示しようとします。正しい？明らかに、最初の行は空でなければならず、追加ボタンだけが必要です。 どのようにすればいいですか？どうもありがとう！私はどうなるのか

Answer 1

私はjsfiddleにあなたのための簡単なデモを作成しているの理解によると、それを見つけて、私はあなたが必要な何かを教えてください。また、同様のコードを取り付ける

http://jsfiddle.net/Lvc0u55v/12390/

。

var myApp = angular.module("myApp", []); 

myApp.controller('myCtrl', function ($scope) { 

$scope.rows = [{"Name" : "Chandra Prakash Variyani"}]; 
$scope.addRow = function() { 
    var obj = { "Name": $scope.Name }; 

    $scope.rows.push(obj) 
} 
$scope.deleteRow = function (index) { 


    $scope.rows.splice(index, 1); 

} 


}); 

HTML

<div class="info-box" id="lkj" ng-app="myApp" ng-controller="myCtrl"> 

<div class="row"> 
    <div class="col-lg-2"><input type="text" ng-model="Name" /></div> 
    <div class="col-lg-2"><input type="button" value="Add" ng-click="addRow()" /></div> 

</div> 
<br /> 
<hr /> 
<table> 
    <tbody> 
     <tr ng-repeat="row in rows"> 
      <td ng-bind="$index+1"> </td> 
      <td ng-bind="row.Name"> </td> 
      <td> <input type="button" value="delete" ng-click="deleteRow(row.Name)" /> </td> 
     </tr> 
     <tr></tr> 
    </tbody> 
    </table> 

Answer 2

はカウンターを作るで、0

からユーザーがボタンをクリックするたびに起動するには、そのカウンタに1を追加します。

彼が10回クリックした場合、彼に表示する行は11行にする必要があります。

次に、ng-repeatを使用して、コードを一行に書くことができます。

これを10回繰り返して11行を得る。

削除ボタンをクリックすると、カウンタに1を引くか、配列を使用してインデックスを取得し、クリックした行を削除できます。

十分明確ですか？それとも言い換えればいい？

Answer 3

あなたの主な問題は、ng-repeat内ですべてのチェックとハードワークを行っていることです。

ng-repeatを操作する必要がある場合、私は常に外側に置いています。たとえば、1行しか残っていない場合はADDボタンを表示しています。

メインのng-repeat trの前後に別の行を作成し、ng-if="!rows.length"を追加します。この方法では、この行はすべての行が削除された場合にのみ表示されます。

DEMO：http://jsfiddle.net/Lvc0u55v/12388/