Как добавить кнопку Добавить, чтобы удалить после добавления в Angularjs

Question

хочу показать только кнопку добавления в первой строке, , когда я нажимаю кнопку «Добавить», добавьте новую строку и измените или спрячьте кнопку добавления, чтобы удалить. постоянно такой же. и первая строка не должна удалить и показать кнопку добавить

div ng-app="ReceiptsApp"> 
    <div ng-controller="ReceiptsController"> 
     <table class="tableData"> 
      <tr ng-repeat="r in rvm"> 
       <td> 
        <select ng-model="c" style="width:150px;height:22px;" ng-options="c.name for c in sample"> 
         <option value="">--Select--</option> 
        </select> 
       </td> 
       <td> 
        <input type="text" lass="input-large" ng-model="c.Address" name="Address" /> 
       </td> 
       <td> 
        <input type="text" class="input-large" ng-model="c.Mobile" name="Mobile" /> 
       </td> 
       <td> 
        <button type="button" class="btn btn-default" ng-click="addRow($index,c)">Add</button> 

       </td> 
       <td> 
        <button type="button" class="btn btn-default" ng-click="deleteRow($index)">Remove</button> 

       </td> 


      </tr> 
     </table> 

    </div> 
</div> 

JS

var ReceiptsApp = angular.module('ReceiptsApp', []); 

ReceiptsApp.controller('ReceiptsController', function ($scope) { 

    $scope.sample = [{ 
     id: '1', 
     name: 'Bhanu', 
     Address: 'Moosapet', 
     Mobile: '9246100100' 
    }, { 
     id: '2', 
     name: 'Madhu', 
     Address: 'Uppal', 
     Mobile: '9000330653' 
    }, { 
     id: '3', 
     name: 'Geetha', 
     Address: 'Sanath Nagar', 
     Mobile: '9912340519' 
    }]; 
    $scope.rvm = [{}]; 
    $scope.addRow = function (index, c) { 
     if ($scope.rvm.length == (index + 1)) { 
      $scope.rvm.push({ 
      }); 
     } 
    } 

    $scope.deleteRow = function ($index) { 
$scope.rvm.splice($index, 1); 
} 


}); 

я отправил код здесь

https://jsbin.com/yamobarapo/edit?html,js,output

Answer 1

Дешевые & быстрый трюк будет сделать Добавить кнопка отображается только для последнего элемента ng-repeat следующим образом:

<td ng-if="$last"> 
    <button type="button" class="btn btn-default" ng-click="addRow($index,c)">Add</button>    
</td> 
<td ng-if="!$last"> 
    <button type="button" class="btn btn-default" ng-click="deleteRow($index)">Remove</button>   
</td> 

Я также обновил ваш JSBin, чтобы увидеть его в действии.