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

【问题标题】：How to get selected checkbox values on a button click event in angularjs如何在angularjs中的按钮单击事件上获取选定的复选框值
【发布时间】：2015-11-06 19:17:44
【问题描述】：

我正在使用 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 控制器。

【问题讨论】：

标签： javascript jquery angularjs asp.net-mvc checkbox

【解决方案1】：

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

【讨论】：