Ionic1中如何通过单选按钮筛选学生出勤列表

Hey there! Let's get your student attendance filtering working smoothly. I'll break down the fixes and improvements for both your HTML template and controller code step by step.

1. Streamline the HTML Template #

Your radio buttons are already bound to data.late_status, so we can ditch the redundant ng-click directives and use ng-change instead to trigger data fetching when the selection updates. We'll also simplify the status display and add a section to show the filtered student list.

<!-- Radio Button Filter Group -->
<input type="radio" name="process" ng-value="0" id="design" ng-change="fetchAttendance()" ng-model="data.late_status"/>
<label class="choice" for="design"> Present-On Time</label><br />

<input type="radio" name="process" ng-value="1" id="late" ng-change="fetchAttendance()" ng-model="data.late_status"/>
<label class="choice" for="late"> Present-Late</label><br />

<!-- Selected Status Indicator -->
<div class="col col-20" ng-show="data.late_status !== undefined">
  <i><b>{{ data.late_status == 0 ? 'On Time' : 'Late' }}</b></i>
</div>

<!-- Filtered Student List Display -->
<div class="student-container" ng-show="students.length > 0">
  <h4>Filtered Students:</h4>
  <ul>
    <li ng-repeat="student in students">
      {{ student.name }} - {{ student.late_status == 0 ? 'On Time' : 'Late' }}
    </li>
  </ul>
</div>

<!-- Loading State -->
<div ng-show="isLoading">
  <ion-spinner></ion-spinner>
  <p>Loading...</p>
</div>

2. Fix and Enhance the Controller Code #

Your original controller had syntax errors (missing API URL, broken parameter formatting) and wasn't actually sending the API request. Let's fix that, add proper error handling, and bind the returned student data to the scope.

// controller.js
angular.module('yourAppModule').controller('AttendanceController', ['$scope', '$ionicLoading', '$http', function($scope, $ionicLoading, $http) {
  // Initialize scope variables
  $scope.data = { late_status: undefined };
  $scope.students = [];
  $scope.isLoading = false;

  // Format today's date to match API requirements (DD/MM/YYYY)
  const today = new Date();
  const formattedDate = `${today.getDate()}/${today.getMonth() + 1}/${today.getFullYear()}`;

  // Core function to fetch filtered attendance data
  $scope.fetchAttendance = function() {
    if (!$scope.data.late_status) return; // Exit if no selection is made

    $scope.isLoading = true;
    $ionicLoading.show({ 
      template: '<ion-spinner></ion-spinner><p>Loading...</p>' 
    });

    // Replace with your actual API endpoint URL
    const apiEndpoint = 'https://your-api-url.com/attendance';

    // Build request parameters matching API requirements
    const requestParams = {
      request_code: 'get',
      start_time: '08:00:00',
      end_time: '10:00:00',
      machine_id: '101',
      date: formattedDate,
      late_status: $scope.data.late_status // Pass the selected filter value
    };

    // Send GET request using Angular's $http (aligns with AngularJS best practices)
    $http.get(apiEndpoint, { params: requestParams })
      .then(function(response) {
        // Update scope with returned student data
        $scope.students = response.data;
        $ionicLoading.hide();
        $scope.isLoading = false;
      })
      .catch(function(error) {
        // Handle API errors gracefully
        console.error('Failed to load attendance data:', error);
        $ionicLoading.hide();
        $scope.isLoading = false;
        alert('Oops! Failed to load attendance. Please try again later.');
      });
  };
}]);

Key Improvements & Notes #

• Removed redundant ng-click: Using ng-change ensures the API call only triggers when the radio button selection changes, which is more efficient.
• Proper API integration: We're using Angular's $http service (instead of raw jQuery) to stay consistent with AngularJS practices, and we directly pass the selected late_status to the API for filtering.
• Loading state control: Added an isLoading flag to manage the spinner and prevent duplicate requests.
• Student list display: Added an ng-repeat section to render the filtered students returned from the API.
• Error handling: Added a catch block to handle API failures and inform the user.

内容的提问来源于stack exchange，提问作者Mohd Saif khan