select all checkbox in SP widget

[davilu]

Hi Experts,

I'm creating a widget in Service Portal and wanted to incorporate a checkbox in the table header that selects/deselects all the rows.   I've tried a couple different things I got off of stackoverflow that used js and jquery, but none of them have worked.   Am I missing something that's specific to angularjs that's preventing the select all from working?   My html for my table is below:

<table class="table table-striped table-hover table-responsive">
       <thead>
           <tr>
               <th><input type="checkbox"/></th>
                   <th>${Case Number}</th>
                   <th>${Short Description}</th>
                   <th>${Start Date}</th>
                   <th>${Work Location}</th>
               </tr>
           </thead>
           <tbody>
           <tr ng-repeat="item in c.list track by $index">
               <td><input type="checkbox" value="{{item.case_number}}"/></td>
                   <td>{{item.case_number}}</td>
                   <td>{{item.short_desc}}</td>
                   <td>{{item.start_date}}</td>
                   <td>{{item.work_location}}</td>                   
               </tr>
           </tbody>
       </table>   

Thanks.

[larstange · Accepted solution]

Hi

I would recommend that you use Checklist-model - AngularJS directive for list of checkboxes . Import as a portal dependency and add it to the widget.

This gives you better control over each checkbox, as they are binded to the angular data model. Your table would look like this

<table class="table table-striped table-hover table-responsive">   
       <thead>   
           <tr>   
               <th><input type="checkbox" ng-click="checkAll()"/></th>   
                   <th>${Case Number}</th>   
                   <th>${Short Description}</th>   
                   <th>${Start Date}</th>   
                   <th>${Work Location}</th>   
               </tr>   
           </thead>   
           <tbody>   
           <tr ng-repeat="item in c.list track by $index">   
               <td><input type="checkbox" name="chkRow" checklist-model="c.rows.selected" checklist-value="item.case_number"/></td>   
                   <td>{{item.case_number}}</td>   
                   <td>{{item.short_desc}}</td>   
                   <td>{{item.start_date}}</td>   
                   <td>{{item.work_location}}</td>                       
               </tr>   
           </tbody>   
</table>

The client script would be something like

$scope.checkAll = function() {
         c.rows.selected = [];
         angular.forEach(c.list, function(value, key) {
         this.push(list.case_number);
         }, c.rows.selected);
} 

You need to add som deselect logic as well, but thats easy - you just empty the array listing the selected checkboxes

  c.rows.selected = [];

[lalit007]

could you please elaborate how to add it as a dependency into a widget?

i mean do i need to download the code from link and create a directive record under Angular providers module?

after that do i need to inject it in client controller?

Kindly respond.

[Thousif S N2]

did you find the solution, If yes could you please explain or share the code?