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

Question

我正在使用AngularJS和MVC。 我有一个带有复选框的表，代码如下：

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

有一个超链接，单击该超链接将仅获取选中的值（categoryID）并将其发送到.js控制器。 按钮控件类似于：

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

控制器代码如下：

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

我可以访问上面的.js控制器，但是出于删除的目的，无法获取数组形式的检查值。

还有另一个.js文件，类似于“数据服务”，它最终将数组从controller.js文件发送到MVC控制器以进行删除。 数据服务的代码如下：

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

我的问题是如何从UI到angularJS控制器以及从那里到数组形式的MVC控制器获取复选框值。

Answer 1

如果您不反对从列表中修改类别对象，则可以通过向列表中的每个对象添加选定的标志来解决相同类型的问题（带有用于批量删除的复选框的重复列表）。 如果将复选框绑定到该<input type="checkbox" ng-model="category.selected" /> ，则在removeSelectedRows您只需为已选择== true的类别中的每个类别提取ID。