如何使用单选按钮删除 table 和 angularjs 中的行？

Question

我正在使用单选按钮删除 table 中的行。我面临的错误是，它一次删除多行。让我给你看我的 table.

的图像

众所周知，单选按钮一次只能勾选一个。如果我单击第 3 行并将其更改为第 2 行并单击删除按钮，它也会删除两行。但是，我需要的是一次只删除一行。

让我展示 index.html 页面。

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

还有我的脚本页面：

$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;
  };

谁能帮我解决这个问题？

Answer 1

这是片段

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

这是 Plunker link : http://plnkr.co/edit/SxuftsrDfBwZ0M6le2im?p=preview

不使用

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

Answer 2

保留一个$scope.toDelete来存储要删除的项目的索引。

如何绑定

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

使用该索引删除您的项目。

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

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

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

这是片段

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>

如何使用单选按钮删除 table 和 angularjs 中的行？

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

html

angularjs

radio-button

ng-repeat