jeudi 26 octobre 2023

Angular filter selection of Grid data by checkmarks

I am programming a page in PowerSchool using Angular that displays a set of grid data, and a button that selects all of the grid data within the page. The button successfully selects all of the data on the page, but what I want it to do is to select only those students who have a checkmark checked.

The JS file looks like this:

define(['angular', 'components/shared/index'], function (angularjs) {

    // create the angular app and include this module and the powerschool module
    var at2App = angularjs.module('at2App', ['powerSchoolModule']);

// create a service to hold values that are used across multiple controllers, directives, and other services.
    at2App.factory('myService', function() {
        return {
            ctrlData: {},
            selectedMonth: undefined,
            id: 0,
            dcid: 0,
            spinner: {wait: true},
            gwScope: undefined
        };
    });
    // creates the controller for the bug_birthday_simple.html page
    at2App.controller('at2Controller', function($scope, $http, myService) {

        // initial values of variable used in this controller

        $scope.gridData = [];
        $scope.dialog = {};
        $scope.spinner = myService.spinner;
        $scope.makeCurrentSelection = function() {
            
            myService.spinner.wait = true;
            var studentList = "0";
            $scope.gridData.forEach(function(row){
                studentList = studentList + "," + row.dcid;
            });
            
            var url = """"
            var payload = """"
            $http.post(url, $j.param(payload), {headers: {'Content-Type':'application/x-www-form-urlencoded'}}).then(function(){
                myService.spinner.wait = false;

            });
      $scope.toggleCheck = function(tof) {
          console.log($scope.gridDataFilter); 
            $scope.gridDataFilter.forEach(function(row){
                row.isselected = tof;
            });
        };  

    
        };
        // get the data from the JSON source file
        $http.get('attendance_letters2.json').then( function (response) {
            
            // the response should include a 'data' array
            var gridData = response.data;
            
            // remove the empty row at the end of the array
            gridData.pop();
            
            // convert birthdates from text strings to javascript dates for each row
            gridData.forEach(row => row.dob = new Date(row.dob));

            // put the grid data into the $scope variable which is bound to the grid widget
            $scope.gridData = gridData;

        });
    
    });

});

My html page has this within its grid table which connects it to the JS script:

    <table class="grid">
                <thead>
                    <tr>
<th><input type="checkbox" ng-click="toggleCheck(toggle)" ng-model="toggle"></th>
                <th data-pss-sort-fields="DCID">DCID</th>
                    <th data-pss-sort-fields="Student_number">Student Number</th>
                        <th data-pss-sort-fields="last_name">Last Name</th>
                        <th data-pss-sort-fields="first_name">First Name</th>
                        <th data-pss-sort-fields="latest_truancy_count">Latest Truancy Count</th>
                    </tr>
                </thead>
                <tbody>
                    <tr data-ng-repeat="item in gridDataFiltered">
                         <td><center><input type="checkbox" ng-model="item.checkbox"></center></td>
                        <td></td>
                       <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                </tbody>
            </table>
        </div>
        <!-- end of PS Grid Widget --> 
    </div>

Th HTML page should be filtering based on the toggleCheck function shouldn't it? Any help on this would be greatly appreciated.




Aucun commentaire:

Enregistrer un commentaire