How to use radio button to delete rows in the table using angularjs?

Question

i'm using radio button to delete the row in the table. The bug i'm facing is, it is deleting the multiple rows at a time . Let me show u the image with of my table.

As we all know that in radio button we can check only one at the time . If i click on row number 3 and change it to row number 2 and click on remove button it is deleting two rows also . But, what i need is to remove only one row at the time .

Let me show the index.html page.

<tbody>
  <tr ng-repeat="personalDetail in personalDetails">
    <td>{{$index + 1}}</td>

    <td>
      <input type="radio" name="radio-primary" ng-model="personalDetail.isDelete" value="false" />
    </td>


    <td>
      <input type="text" ng-model="personalDetail.fname" placeholder="" class="form-control input-md">
    </td>
    <td>
      <input type="text" name="midleName" ng-model="personalDetail.Mname" placeholder="" class="form-control input-md">
    </td>
    <td>
      <input type="text" name="lastName" ng-model="personalDetail.lname" placeholder="" class="form-control input-md">
    </td>
    <td>
      <input type="text" name="mobileNumber" ng-model="personalDetail.phone" placeholder="" class="form-control input-md">
    </td>
    <td>
      <input type="text" name="email" ng-model="personalDetail.email" placeholder="" ng-checked="false" class="form-control input-md">
    </td>
    <td>
      <div>
        <input class="form-control" type="text" datepicker-popup="dd/MM/yyyy" id='txtDate' ng-model="personalDetail.date" is-open="personalDetail.isOpen" close-text="Close" ng-click="open($event, personalDetail)" name="datefilter" value="" />

      </div>
    </td>
    <td>
      <input type="text" name="UIDNumber" ng-model="personalDetail.UID" placeholder="" class="form-control input-md">
    </td>
    <td>
      <select type="text" name="IdType" ng-model="personalDetail.idType" placeholder="" class="form-control input-md">
        <option value="">-Select--</option>
      </select>
    </td>
    <td>
      <input type="text" name="ID" ng-model="personalDetail.id" placeholder="" class="form-control input-md">
    </td>
    <td>
      <select type="text" name="collectionPoint" ng-model="personalDetail.collectionPoint" placeholder="" class="form-control input-md">
        <option value="">-Select--</option>
      </select>
    </td>
    <td>
      <input type="checkbox" name="ID" ng-model="personalDetail.Action" placeholder="" class="form-control input-md"> Disable
    </td>
    <td>
      <textarea type="text" name="Remarks" ng-model="personalDetail.remarks" placeholder="" class="form-control input-md"></textarea>
    </td>
  </tr>
</tbody>
</table>
</div>
</div>
</div>

<!--   <div>
                                                        <button type="button" class="btn btn-primary" ng-click='addPlaceOfWork();'><span class="glyphicon glyphicon-plus"></span>Add</button>
                                                    </div> -->
</div>
<div class="preview_button" id="logoutLblPos3" ng-show="showDocuments">
  <div class="col-md-11">
    <button type="submit" class="btn btn-success btn-md pull-right" ng-click="saveGroup()" ng-disabled='submitEnabled'>Save</button>
    <br>
    <br>
  </div>
</div>
<div class="form-group" id="logoutLblPos">
  <div class="col-md-11">
    <input type="button" class="btn btn-danger pull-right" ng-click="remove()" value="Remove">
  </div>
</div>
<br>
<div class="form-group" id="logoutLblPos1">
  <div class="col-md-11">
    <input type="submit" ng-click="addNew()" class="btn btn-primary addnew pull-right" value="Add New">
  </div>
</div>

And my script page :

$scope.personalDetails = [
        {

                  'fname': "",
                  'Mname': "",
                  'lname': "",
                  'phone': "",
                  'email': "",
                  'date': "1-11-1993",
                  //'isOpen': false,
                  'UID': "",
                  'idType': "",
                  'id': "",
                  'collectionPoint': "",
                  'Action': "",
                  'remarks': ""
       }];


      $scope.addNew = function(){
        var personalDetail = {};
       personalDetail.fname ='' ;
       personalDetail.Mname ='';
       personalDetail.lname ='';
       personalDetail.phone ='';
       personalDetail.email ='';
       personalDetail.date ='';
       personalDetail.UID ='';
       personalDetail.idType ='';
       personalDetail.id ='';
       personalDetail.collectionPoint ='';
       personalDetail.Action ='';
       personalDetail.remarks ='';
       $scope.personalDetails.push(personalDetail);

    };

    $scope.remove = function(){
        var newDataList=[];
        angular.forEach($scope.personalDetails,function(v){
        if(!v.isDelete){
            newDataList.push(v);
        }
    });    $scope.personalDetails=newDataList;
    };

  $scope.personalDetails.forEach(function(personalDetail){
    personalDetail.date = new Date(personalDetail.date);
  });

  $scope.open = function($event, personalDetail) {
    $event.preventDefault();
    $event.stopPropagation();

    personalDetail.isOpen = true;
  };

Can anyone help me with this ?

Naghaveer R · Accepted Answer · 2016-11-18 10:26:05Z

2

Here isthe snippet

<md-radio-group ng-model="selectedName">
  <table>
    <tbody>
  <tr ng-repeat="personalDetail in personalDetails">
    <td>{{$index + 1}}</td>

    <td>
      <md-radio-button ng-value="personalDetail.fname" class="md-primary"></md-radio-button>
    </td>
</tr>
<tbody>
<table>
</md-radio-group>

Here is the Plunker link : http://plnkr.co/edit/SxuftsrDfBwZ0M6le2im?p=preview

Without using

http://plnkr.co/edit/zsrVZM4RpV8PwODXh4zN?p=preview

edited Nov 18, 2016 at 10:26

answered Nov 18, 2016 at 9:35

Naghaveer R

2,9424 gold badges33 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

anil chean Over a year ago

@ NVG Thank u for your reply and answer but can u do it with normal radio button?

Naghaveer R Over a year ago

Please find another demo link

sam · Accepted Answer · 2016-11-18 09:58:57Z

Keep a $scope.toDelete to store the index of item to delete.

How to bind

<input type="radio" name="radio-primary" ng-model="$parent.toDelete" ng-value="$index"/>

Remove your item using that index.

$scope.remove = function() {
  var indexItem = $scope.toDelete;

  $scope.personalDetails.splice(indexItem, 1);

  $scope.toDelete = -1;    //reset selection
};

Here is the snippet

console.clear();

var myApp = angular.module('myApp', []);
myApp.controller('test', ['$scope',
  function($scope) {

    var counter = 1;

    $scope.toDelete = -1;

    $scope.personalDetails = [{

      'fname': "red",
      'Mname': "",
      'lname': "",
      'phone': "",
      'email': "",
      'date': "1-11-1993",
      //'isOpen': false,
      'UID': "",
      'idType': "",
      'id': "",
      'collectionPoint': "",
      'Action': "",
      'remarks': ""
    }];


    $scope.addNew = function() {
      var personalDetail = {};
      personalDetail.fname = 'Some' + (counter++);
      personalDetail.Mname = '';
      personalDetail.lname = '';
      personalDetail.phone = '';
      personalDetail.email = '';
      personalDetail.date = '';
      personalDetail.UID = '';
      personalDetail.idType = '';
      personalDetail.id = '';
      personalDetail.collectionPoint = '';
      personalDetail.Action = '';
      personalDetail.remarks = '';
      $scope.personalDetails.push(personalDetail);
    };

    $scope.remove = function() {
      var indexItem = $scope.toDelete;

      $scope.personalDetails.splice(indexItem, 1);

      $scope.toDelete = -1; //reset selection
    };

    $scope.personalDetails.forEach(function(personalDetail) {
      personalDetail.date = new Date(personalDetail.date);
    });

    $scope.open = function($event, personalDetail) {
      $event.preventDefault();
      $event.stopPropagation();

      personalDetail.isOpen = true;
    };

  }
]);

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>

</head>

<body ng-app="myApp" ng-controller='test'>
  <table>
    <tbody>
      <tr ng-repeat="personalDetail in personalDetails">
        <td>{{$index + 1}}</td>

        <td>
          <input type="radio" name="radio-primary" ng-model="$parent.toDelete" ng-value="$index" />
        </td>


        <td>
          <input type="text" ng-model="personalDetail.fname" placeholder="" class="form-control input-md">
        </td>
        <td>
          <input type="text" name="midleName" ng-model="personalDetail.Mname" placeholder="" class="form-control input-md">
        </td>
        <td>
          <input type="text" name="lastName" ng-model="personalDetail.lname" placeholder="" class="form-control input-md">
        </td>
        <td>
          <input type="text" name="mobileNumber" ng-model="personalDetail.phone" placeholder="" class="form-control input-md">
        </td>
        <td>
          <input type="text" name="email" ng-model="personalDetail.email" placeholder="" ng-checked="false" class="form-control input-md">
        </td>
        <td>
          <div>
            <input class="form-control" type="text" datepicker-popup="dd/MM/yyyy" id='txtDate' ng-model="personalDetail.date" is-open="personalDetail.isOpen" close-text="Close" ng-click="open($event, personalDetail)" name="datefilter" value="" />

          </div>
        </td>
        <td>
          <input type="text" name="UIDNumber" ng-model="personalDetail.UID" placeholder="" class="form-control input-md">
        </td>
        <td>
          <select type="text" name="IdType" ng-model="personalDetail.idType" placeholder="" class="form-control input-md">
            <option value="">-Select--</option>
          </select>
        </td>
        <td>
          <input type="text" name="ID" ng-model="personalDetail.id" placeholder="" class="form-control input-md">
        </td>
        <td>
          <select type="text" name="collectionPoint" ng-model="personalDetail.collectionPoint" placeholder="" class="form-control input-md">
            <option value="">-Select--</option>
          </select>
        </td>
        <td>
          <input type="checkbox" name="ID" ng-model="personalDetail.Action" placeholder="" class="form-control input-md">Disable
        </td>
        <td>
          <textarea type="text" name="Remarks" ng-model="personalDetail.remarks" placeholder="" class="form-control input-md"></textarea>
        </td>
      </tr>
    </tbody>
  </table>
  </div>
  </div>
  </div>

  <!--   <div>
                                                        <button type="button" class="btn btn-primary" ng-click='addPlaceOfWork();'><span class="glyphicon glyphicon-plus"></span>Add</button>
                                                    </div> -->
  </div>
  <div class="preview_button" id="logoutLblPos3" ng-show="showDocuments">
    <div class="col-md-11">
      <button type="submit" class="btn btn-success btn-md pull-right" ng-click="saveGroup()" ng-disabled='submitEnabled'>Save</button>
      <br>
      <br>
    </div>
  </div>
  <div class="form-group" id="logoutLblPos">
    <div class="col-md-11">
      <input type="button" class="btn btn-danger pull-right" ng-click="remove()" value="Remove">
    </div>
  </div>
  <br>
  <div class="form-group" id="logoutLblPos1">
    <div class="col-md-11">
      <input type="submit" ng-click="addNew()" class="btn btn-primary addnew pull-right" value="Add New">
    </div>
  </div>
</body>

</html>

Collectives™ on Stack Overflow

How to use radio button to delete rows in the table using angularjs?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related