In table, get selected row id in array

Question

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

try using `$index` to get the index of the element inside ng-repeat. `$index` is actually the iterator offset of the repeated element (0..length-1) — Avantika Saini, Jun 13 '16 at 13:11

jusopi · Answer 1 · 2016-06-13T13:40:02.007

3

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

edited Jun 13 '16 at 13:40

answered Jun 13 '16 at 13:00

jusopi

6,791
2
33
44

I appreciate your suggestion. what is doing this: return _.chain(items).filter({$selected:true}).map('id') – Jun 13 '16 at 13:27
If you use the lodash library, you can chain together several functions. This simply targets the items array, filters and passes an array where $selected is true and then maps the ids of the filtered items. – jusopi Jun 13 '16 at 13:35
3

Rather than ignore your request, I will explain why I must respectfully decline. a) I am now starting my day at work and can't dedicate enough time to work through your example and b) I'd rather you enjoy the rewards of solving it by yourself by using the tools provided in my answer and others on this website. You'll retain and understand much better once you've pieced it together. – jusopi Jun 13 '16 at 13:49
Could you check this link https://stackoverflow.com/questions/47568013/get-more-than-1000-row-in-the-data-table-in-angular-js-from-mongodb – Varun Sharma Jan 19 '18 at 12:38

score 0 · Answer 2 · answered Jan 19 '18 at 11:58

0

This filter is cleaner:

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

answered Jan 19 '18 at 11:58

Alarcon

21
2

In table, get selected row id in array

2 Answers2