0

I am using ng-table to create my table. I have a initially disabled button at the top of the table. I wanted to make this button enabled if I select any of the check box. When non of the check box is checked button will disable again. How I can achieve this accurately?

My Sample Code:

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

Thanks in advance

2
  • could you update the checkbox.html here Commented Sep 8, 2015 at 20:01
  • Sorry I missed that ! updated now Commented Sep 8, 2015 at 20:05

3 Answers 3

1

You can actually have a ng-class assigned to get is enabled/disabled and also a ng-click to do its function, return false if the class is disabled/your checkbox count = total or 0 based on your logic.

Hope it helps

<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
    }
}
Sign up to request clarification or add additional context in comments.

Comments

1

Here is an example: http://fiddle.jshell.net/L6yrdsta/1/

Set the checkboxes ng-checked attribute to a $scope variable so that we can bind the "checked" status to the model. Then we can use a function on the ng-disabled attribute of the button that will return a bool value based on if any of the checkboxes are currently checked. If any checkboxes are checked then the button will be enabled.

Comments

0

You need something called a Watch. You need to define it to watch the array of checkboxes and set a variable to true or false depending on what it finds. The watch will update every time digest is run.

1 Comment

On sample example there are two watch already for the checkbox .. Is this possible to integrate with them? how it can be done ?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.