AngularJS中ng-repeat下拉选中后调用函数及分页异常问题

Hey there! Let's tackle your two questions one by one, using AngularJS best practices that fit real-world use cases.

Question 1: How to call a function when an option rendered by ng-repeat is selected? #

While you can use ng-repeat to render <option> elements, AngularJS has a more reliable built-in way to handle selection events with the ng-change directive. Here's how to set it up smoothly:

Step 1: The HTML Template #

<select ng-model="selectedOption" ng-change="onOptionSelected()">
  <!-- Generate options with ng-repeat -->
  <option ng-repeat="option in optionsList" value="{{option.id}}">
    {{option.name}}
  </option>
</select>

Step 2: Define the Trigger Function in Your Controller #

angular.module('yourApp').controller('YourController', function($scope) {
  // Sample department/option data
  $scope.optionsList = [
    {id: 1, name: 'Marketing'},
    {id: 2, name: 'Engineering'},
    {id: 3, name: 'HR'}
  ];

  // Function that runs when selection changes
  $scope.onOptionSelected = function() {
    // Access the selected ID via the bound ng-model
    console.log('Selected option ID:', $scope.selectedOption);
    // Add your custom logic here—like fetching related data, updating UI, etc.
  };
});

Why ng-change is better than onclick? #

• It’s tightly integrated with Angular’s two-way data binding, so it only triggers when the ng-model value actually changes (no false triggers from accidental clicks).
• For dynamically rendered elements (like those from ng-repeat), ng-change ensures proper event binding without messy manual DOM manipulation.

Question 2: Pagination not working with default selected department in ng-options #

Let’s break down why your pagination is misbehaving and fix it step by step:

Root Cause #

• Your ng-init="department=data.usercurrentDeptID" sets the default department, but it doesn’t trigger the ng-change="change()" function. That means your pagination logic never runs on page load, leaving it in an uninitialized state.
• When you switch departments, change() runs to load data, but it likely doesn’t reset or update pagination state properly (like jumping back to page 1 or recalculating total pages).

Fix 1: Move Default Value Setup to the Controller #

Avoid using ng-init for complex setup (Angular’s official docs discourage it for anything beyond simple expressions). Instead, set the default department in your controller after your data loads, and call your initialization logic explicitly:

angular.module('yourApp').controller('DeptController', function($scope) {
  // Assume your data is loaded here (e.g., via an API call or service)
  $scope.data = {
    deptCategories: [...], // Your full department list
    usercurrentDeptID: 3 // User's default department ID
  };

  // Set default selected department
  $scope.department = $scope.data.usercurrentDeptID;

  // Initialize data and pagination on page load
  $scope.initDeptDataAndPagination();
});

Update your HTML to remove ng-init:

<select 
  ng-model="department" 
  ng-options="option.id as option.name for option in data.deptCategories" 
  ng-change="change()"
></select>

Fix 2: Update change() to Handle Pagination State #

Modify your change() function to reset pagination whenever the department changes:

$scope.change = function() {
  // Load data for the newly selected department
  $scope.loadDepartmentData($scope.department);

  // Reset pagination to first page (critical for fixing odd behavior)
  $scope.currentPage = 1;
  
  // Recalculate total pages based on the new data set
  $scope.totalPages = Math.ceil($scope.departmentData.length / $scope.itemsPerPage);
};

// Reuse this function for initial load and department changes
$scope.initDeptDataAndPagination = function() {
  $scope.loadDepartmentData($scope.department);
  $scope.currentPage = 1;
  $scope.totalPages = Math.ceil($scope.departmentData.length / $scope.itemsPerPage);
};

Fix 3: Ensure Pagination Binds to the Correct Data #

Double-check that your pagination component uses the current department’s data set. For example, if you’re using a filter for pagination:

<!-- Example pagination filter setup -->
<div ng-repeat="item in departmentData | startFrom:(currentPage-1)*itemsPerPage | limitTo:itemsPerPage">
  {{item.name}}
</div>

Make sure departmentData gets updated whenever the selected department changes (your loadDepartmentData function should handle this).

内容的提问来源于stack exchange，提问作者Mr world wide