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