2016-11-18 41 views
1

我使用单选按钮删除表中的行。我面临的错误是,它一次删除多行。让我向你展示我的桌子上的图像。 enter image description here如何使用单选按钮删除表中的行使用angularjs?

众所周知,在单选按钮中,我们当时只能检查一个。 如果我点击行号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; 
    }; 

谁能帮助我?

回答

1

保持一个$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>

+0

@山姆谢谢你的回答。它工作正常 –

+0

@anilchean没有问题。它很好帮助。 :) – sam

2

这里isthe片断

<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链接:http://plnkr.co/edit/SxuftsrDfBwZ0M6le2im?p=preview

不使用

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

+0

@ NVG感谢ü您的回复和解答,但ü可以用正常的单选按钮办呢? –

+0

请发现另一个演示链接 –

相关问题