使用角度表中的复选框

问题描述 投票:-1回答:1

我已经使用Angular和php pdo完成了Crud应用程序,我现在正尝试从表中选择多行,然后使用Submit按钮对其进行操作,但是我对Angular的了解到此为止了

<div class="table-responsive" style="overflow-x: unset;">
                <table datatable="ng" dt-options="vm.dtOptions" class="table table-bordered table-striped" >
                    <thead>
                        <tr>

                            <th >select</th>
                            <th>date</th>
                            <th>first name</th>
                            <th>last name</th>
                            <th>age</th>
                            <th>action</th>
                            <th>action</th>
                            <th>action</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="name in namesData  track by $index" ng-class-even="'alternate-row'" >
                        <td name="checkbox">
          <input type="checkbox"  ng-model="row.checked" ng-style="row.checkboxStyle" />{{row.checked}}
        </td>
                            <td>{{name.date}}</td>
                            <td>{{name.first_name}}</td>
                            <td>{{name.last_name}}</td>
                            <td>{{name.age}}</td>
                            <td><button type="button" ng-click="fetchSingleData(name.id)" class="btn btn-warning btn-xs">edit</button></td>
                            <td><button type="button" ng-click="deleteData(name.id)" class="btn btn-danger btn-xs">delete</button></td>
                            <td><button type="button" ng-click="single_move(name.id)" class="btn btn-success btn-xs">done</button></td>
                        </tr>
                    </tbody>

                </table>
            </div>

并且此按钮应该执行操作:

<button style="margin: 0 auto !important; display: block; text-align: center; width: 15%" type="button" ng-click="delete_multi(name.id)" class="btn btn-info btn-xl custom-btn">multi delete</button>

我的角度函数是:

var app = angular.module('crudApp', ['datatables']);


app.controller('crudController', function($scope, $http){

$scope.delete_multi = function(id){
        if(confirm("Are you sure you want to remove it?"))
        {
            $http({
                method:"POST",
                url:"insert.php",
                data:{'id':id, 'action':'Delete'}
            }).success(function(data){
                $scope.success = true;
                $scope.error = false;
                $scope.successMessage = data.message;
                $scope.fetchData();
            }); 
        }
    };

有人能告诉我正确的方法吗?谢谢

javascript php angularjs
1个回答
0
投票
您可以使用与ng-repeat中使用的相同的var使用name而不是row,以便可以将选中的属性添加到当前项(如果您至少单击一次复选框,则将添加选中的属性计划继续使用同一集合,如果计划发送给他相同的对象以进行更新或其他操作,请确保删除此属性...)像这样...

<div class="table-responsive" style="overflow-x: unset;"> <table datatable="ng" dt-options="vm.dtOptions" class="table table-bordered table-striped" > <thead> <tr> <th >select</th> <th>date</th> <th>first name</th> <th>last name</th> <th>age</th> <th>action</th> <th>action</th> <th>action</th> </tr> </thead> <tbody> <tr ng-repeat="name in namesData track by $index" ng-class-even="'alternate-row'" > <td name="checkbox"> <input type="checkbox" ng-model="name.checked" ng-style="row.checkboxStyle" />{{name.checked}} </td> <td>{{name.date}}</td> <td>{{name.first_name}}</td> <td>{{name.last_name}}</td> <td>{{name.age}}</td> <td><button type="button" ng-click="fetchSingleData(name.id)" class="btn btn-warning btn-xs">edit</button></td> <td><button type="button" ng-click="deleteData(name.id)" class="btn btn-danger btn-xs">delete</button></td> <td><button type="button" ng-click="single_move(name.id)" class="btn btn-success btn-xs">done</button></td> </tr> </tbody> </table> </div>

而且我想您在当前作用域中有namesData添加到delete_multi此...

var app = angular.module('crudApp', ['datatables']); app.controller('crudController', function($scope, $http){ $scope.delete_multi = function(){ let ids = $scope.namesData.filter(function(item){ return item.checked === true;//Keep only those with valid checked property }).map(function(item){ return item.id;//return just id }); if(confirm("Are you sure you want to remove it?")) { $http({ method:"POST", url:"insert.php", data:{'ids':ids, 'action':'DeleteMultiple'}//send a different action which internaly calls Delete action in php for each id }).success(function(data){ $scope.success = true; $scope.error = false; $scope.successMessage = data.message; $scope.fetchData(); }); } };

© www.soinside.com 2019 - 2024. All rights reserved.