Question

我正在使用ng-table创建我的表格。我在表格的顶部有一个最初禁用的按钮。如果我选中任何一个复选框，我想启用此按钮。如果未选中复选框，则按钮将再次禁用。我怎样才能准确地实现这一目标？

我的示例代码：

HTML

<button class="btn btn-default pull-right" disabled >Remove Selected</button>

    <table ng-table="tableParams" show-filter="true" class="table ng-table-responsive">
        <tr ng-repeat="user in $data" ng-class="{ 'emphasis': user.money > 500 }">
            <td width="30" style="text-align: left" header="'ng-table/headers/checkbox.html'">
                <input type="checkbox" ng-model="checkboxes.items[user.id]" />
            </td>
            <td data-title="'Name'" filter="{ 'name': 'select' }" filter-data="names($column)">
                {{user.name}}
            </td>
            <td data-title="'Money'" sortable="'money'">
                {{user.money}}
            </td>
        </tr>
    </table>
<script type="text/ng-template" id="ng-table/headers/checkbox.html">
                <input type="checkbox" ng-model="checkboxes.checked" id="select_all" name="filter-checkbox" value="" />
              </script>

JS

var app = angular.module('main', ['ngTable']).
    controller('DemoCtrl', function($scope, $filter, $q, NgTableParams) {
        var data = [{id: 1, name: "Moroni", age: 50, money: -10},
                    {id: 2, name: "Tiancum", age: 43,money: 120},
                    {id: 3, name: "Jacob", age: 27, money: 5.5},
                    {id: 4, name: "Nephi", age: 29,money: -54},
                    {id: 5, name: "Enos", age: 34,money: 110},
                    {id: 6, name: "Tiancum", age: 43, money: 1000},
                    {id: 7, name: "Jacob", age: 27,money: -201},
                    {id: 8, name: "Nephi", age: 29, money: 100},
                    {id: 9, name: "Enos", age: 34, money: -52.5},
                    {id: 10, name: "Tiancum", age: 43, money: 52.1},
                    {id: 11, name: "Jacob", age: 27, money: 110},
                    {id: 12, name: "Nephi", age: 29, money: -55},
                    {id: 13, name: "Enos", age: 34, money: 551},
                    {id: 14, name: "Tiancum", age: 43, money: -1410},
                    {id: 15, name: "Jacob", age: 27, money: 410},
                    {id: 16, name: "Nephi", age: 29, money: 100},
                    {id: 17, name: "Enos", age: 34, money: -100}];
        $scope.tableParams = new NgTableParams({
            page: 1,            // show first page
            count: 10           // count per page
        }, {
            total: data.length, // length of data
            getData: function($defer, params) {
                // use built-in angular filter
                var orderedData = params.sorting() ?
                        $filter('orderBy')(data, params.orderBy()) :
                        data;
                orderedData = params.filter() ?
                        $filter('filter')(orderedData, params.filter()) :
                        orderedData;
                params.total(orderedData.length); // set total for recalc pagination
                $defer.resolve($scope.users = orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
            }
        });
        var inArray = Array.prototype.indexOf ?
                function (val, arr) {
                    return arr.indexOf(val)
                } :
                function (val, arr) {
                    var i = arr.length;
                    while (i--) {
                        if (arr[i] === val) return i;
                    }
                    return -1
                };
        $scope.names = function(column) {
            var def = $q.defer(),
                arr = [],
                names = [];
            angular.forEach(data, function(item){
                if (inArray(item.name, arr) === -1) {
                    arr.push(item.name);
                    names.push({
                        'id': item.name,
                        'title': item.name
                    });
                }
            });
            def.resolve(names);
            return def;
        };
        $scope.checkboxes = { 'checked': false, items: {} };
        // watch for check all checkbox
        $scope.$watch('checkboxes.checked', function(value) {
            angular.forEach($scope.users, function(item) {
                if (angular.isDefined(item.id)) {
                    $scope.checkboxes.items[item.id] = value;
                }
            });
        });
        // watch for data checkboxes
        $scope.$watch('checkboxes.items', function(values) {
            if (!$scope.users) {
                return;
            }
            var checked = 0, unchecked = 0,
                total = $scope.users.length;
            angular.forEach($scope.users, function(item) {
                checked   +=  ($scope.checkboxes.items[item.id]) || 0;
                unchecked += (!$scope.checkboxes.items[item.id]) || 0;
            });
            if ((unchecked == 0) || (checked == 0)) {
                $scope.checkboxes.checked = (checked == total);
            }
            // grayed checkbox
            angular.element(document.getElementById("select_all")).prop("indeterminate", (checked != 0 && unchecked != 0));
        }, true);
    })

提前致谢

Answer 1

实际上，您可以为启用/禁用分配的ng-class以及执行其功能的ng-click，如果禁用类/您的复选框计数=总计或0，则根据您的逻辑返回false。

希望有所帮助

<button class="btn btn-default pull-right" ng-class="allClass()" ng-click="allClass('click')">Remove Selected</button>


$scope.allClass = function(mode){
    if(mode==='click'){
        if(!$scope.checkboxes.checked){
            return; //if class is disabled dont do anything
        }else{
            if (!$scope.users) {
                return;
            }
            var checked = 0, unchecked = 0,
            var total = $scope.users.length;
            angular.forEach($scope.users, function(item) {
                checked   +=  ($scope.checkboxes.items[item.id]) || 0;
                unchecked += (!$scope.checkboxes.items[item.id]) || 0;
            });
            if(cheked>0){
               //do your thing
            }
        }

    }else{
        //this is for the ng-class attr call
        return $scope.checkboxes.checked ? '' : 'disabled';
        //add some css to your file to look like disable button
    }
}

Answer 2

以下是一个示例：http://fiddle.jshell.net/L6yrdsta/1/

将复选框ng-checked属性设置为$ scope变量，以便我们可以将“已检查”状态绑定到模型。然后我们可以在按钮的ng-disabled属性上使用一个函数，该函数将根据当前是否选中任何复选框返回bool值。如果选中任何复选框，则会启用该按钮。

Angularjs在复选框检查时显示和隐藏按钮

2 个答案: