anil chean anil chean - 15 days ago 8
HTML Question

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

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.enter image description here

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 ?

sam sam
Answer

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>

Comments