CODEWITHSUNDEEP
angularjsangular-datatables
user4853315
user4853315

Reputation:

In table, get selected row id in array

In table every row assosiated with checkbox and have option to check all row. I want to get selected rows id of table in array.

Here is plunker code.

HTML:

 <table id="datatable-buttons" class="table table-striped table-bordered">
                                    <thead>
                                        <th>
                                              <input type="checkbox" ng-model="selectRowId" ng-click="selectedAll()">
                                        </th>
                                    </thead>
                                    <tbody ng-init="get_product()">
                                        <!--step 6-->
                                        <tr ng-repeat="product in filtered = (pagedItems| filter:search | orderBy : predicate :reverse) | startFrom:currentPage * entryLimit | limitTo:entryLimit | findobj:multipleVlaue | searchFor:searchString"> <!-- searchFor:searchString --> 
                                            <td> 
                                                <input type="checkbox" ng-model="selctedIds[product.id]" ng-checked="product.deleted">
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>

Controller: 

    $scope.selectedAll = function () {
    $scope.pagedItems.forEach(function (product) {
        if ($scope.selectRowId) {
            product.deleted = true;
        } else {
            product.deleted = false;
        }
    });
}

Upvotes: 0

Views: 3715

Answers (2)

Alarcon
Alarcon

Reputation: 21

This filter is cleaner: 

 .filter( function (item) {
            return item.$selected;
     }).map(function (item) { return item.id });

Upvotes: 0

jusopi
jusopi

Reputation: 6813

If you want something scalable that accommodates things like complex filtering, pagination, etc. then I suggest you write an angular property to each object. So for the checkbox we'd want to toggle this boolean value like so:

<input type="checkbox" ng-model="item.$selected"/>

For your toggle all/none, you'll need to tap a controller function:

$scope.toggleAll = function(bSelect){
    itemArray.forEach( function(item){ item.$selected = bSelect; })
}

The reason I suggest prepending your selected value with a $ like $selected is that any HTTP calls you make with the objects, Angular will strip any $property before converting to JSON, just in case your backend has issue.

I'd recommend using a filter to pull the IDs:

<div>{{ itemArray | getSelIds }}</div>

and the filter

.filter( 'geSeltIds', function(){
    return function(items){
        //if you happen to use lodash
        return _.chain(items).filter({$selected:true}).map('id').value()

        //manual
        ids = []
        items.forEach(function(item){
            if(item.$selected)
                ids.push(item.id)
        })
        return ids
    }
})

Upvotes: 3

Related Questions