2016-11-18 3 views
1

私はラジオボタンを使用してテーブルの行を削除しています。私が直面しているバグは、一度に複数の行を削除することです。私は私のテーブルを使ってイメージを表示しましょう。 enter image description hereanglejsを使用してラジオボタンを使用してテーブル内の行を削除する方法はありますか?

ラジオボタンでは、その時点で1つしか確認できないことがわかっています。 行番号3をクリックして行番号2に変更し、削除ボタンをクリックすると2行も削除されます。しかし、私が必要とするのは、その時に1行だけを取り除くことです。

私は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"/> 

をバインドする方法を

そのインデックスを使用してアイテムを削除します。 NVG @

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

@ samあなたの答えをありがとうございます。それはうまく動作します –

+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

お返事と答えをありがとうしかし、uが、通常のラジオボタンでそれを行うことができますか? –

+0

もう一つのデモリンク –

関連する問題