如何在angularjs中的按钮单击事件上获取选定的复选框值

Question

I am working with AngularJS and MVC. I have a table with check-boxes and the code is like:

<div class="table table-responsive">
            <table class="table table-striped">
                <thead>
                    <tr>
                        <th>
                            <input type="checkbox" checkbox-all="categories.isSelected" /></th>
                        <th>Category Name</th>
                        <th>Description</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    <tr dir-paginate="category in categories | filter:search_txt | itemsPerPage: pageSize" current-page="currentPage">
                        <td style="padding-left: 9px; padding-top: 1px; padding-bottom: 1px; vertical-align: middle">
                            <div style="height: 35px; overflow: auto;">
                                **<input type="checkbox" ng-model="selected[category.categoryID]" />**
                            </div>
                        </td>
                        <td style="padding: 1px; vertical-align: middle">
                            <div style="height: 35px; overflow: auto;">{{category.categoryName}}</div>
                        </td>
                        <td style="padding: 1px; vertical-align: middle">
                            <div style="height: 35px; overflow: auto;">{{category.description}}</div>
                        </td>
                        <td style="padding: 1px; vertical-align: middle">
                            <div style="height: 35px; overflow: auto;">
                                <a class="btn btn-primary" href="#/category/{{category.categoryID}}" title="Edit">
                                    <i class="glyphicon glyphicon-edit"></i></a>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>

There is a hyperlink and clicking the hyperlink will take only checked values (categoryID) and send them to a .js controller. The button control is like:

<a class="btn btn-danger" ng-click="removeSelectedRows()" ng-controller="categoryMultiDeleteController"><i class="glyphicon glyphicon-trash"></i> Delete</a>

The controller code is like:

myApp.controller('categoryMultiDeleteController',
    ['$scope', 'categoryDataService',
    function ($scope) {
        $scope.removeSelectedRows = function() {
            $scope.categories = $.grep($scope.categories, function (category) {
                return $scope.selected[category.categoryID];
            });
        }
    }]);

I can access the above .js controller but could not get the checked value in form of an array for the purpose of deletion.

There is an another .js file which is like a "data-service" and it finally send the array from the controller.js file to a MVC controller for deletion. The code of the data-service is like:

var _selectedRows = function (_categories) {
        var deferred = $q.defer();
        var controllerQuery = "category/DeleteMultipleCategory/" + _categories;

        $http.post(controllerQuery)
          .then(function (result) {
              deferred.resolve();
          },
          function (error) {
              // Error
              deferred.reject();
          });
        return deferred.promise;
    };

My problem is how can I get the checkbox value from UI to angularJS controller and from there to a MVC controller in the form of an array.

Answer 1

If you're not opposed to modifying the category object from your list, I've solved the same sort of problem (a repeat list with checkboxes for bulk delete) by adding a selected flag to each object in the list. If you bind your checkbox to that <input type="checkbox" ng-model="category.selected" /> , on your removeSelectedRows you can simply pluck out the id for every category in categories that has selected == true.