AngularJS中点击Li传代码至控制器并返回数组展示问题

我来帮你搞定这个需求！下面是完整的实现代码，包含点击li传递参数、控制器处理数据、用ng-repeat渲染表格的全流程：

1. HTML 结构 #

首先在页面里设置好触发点击的li元素，以及用来展示数据的表格：

<div ng-app="myApp" ng-controller="StudentController">
  <!-- 点击li传递代码7 -->
  <ul>
    <li ng-click="loadStudents(7)">加载第7学期学生</li>
    <li ng-click="loadStudents(8)">加载第8学期学生</li>
  </ul>

  <!-- 用ng-repeat渲染表格 -->
  <table border="1" ng-if="students.length > 0">
    <thead>
      <tr>
        <th>ID</th>
        <th>姓名</th>
        <th>学分</th>
        <th>学期</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="student in students">
        <td>{{student.id}}</td>
        <td>{{student.name}}</td>
        <td>{{student.credit}}</td>
        <td>{{student.semester}}</td>
      </tr>
    </tbody>
  </table>
  <p ng-if="students.length === 0">暂无数据，请点击上方选项加载</p>
</div>

2. AngularJS 控制器逻辑 #

接下来编写模块和控制器，处理参数接收、数据过滤，并把结果绑定到视图：

<script type="text/javascript">
var app = angular.module('myApp', []);

// 模拟学生数据源
app.value('studentInfo', [
  { id: 1, name: 'Mahedee Hasan', credit: 20, semester: '8th' },
  { id: 3, name: 'Enamul Haque', credit: 15, semester: '7th' },
  { id: 4, name: 'Rahim Khan', credit: 18, semester: '7th' } // 新增一条7学期数据方便测试
]);

app.controller('StudentController', function($scope, studentInfo) {
  // 初始化学生列表为空
  $scope.students = [];

  // 定义接收参数的方法
  $scope.loadStudents = function(semesterCode) {
    // 根据传入的代码过滤数据（这里假设7对应'7th'，8对应'8th'）
    $scope.students = studentInfo.filter(function(student) {
      return student.semester === semesterCode + 'th';
    });
  };
});
</script>

关键部分说明 #

• 点击传值：通过ng-click="loadStudents(7)"把参数7传递给控制器的loadStudents方法
• 数据处理：控制器里利用filter方法对原始学生数据进行筛选，匹配对应学期的记录
• 表格渲染：用ng-repeat="student in students"遍历处理后的数组，把每一条学生数据渲染成表格行
• 空状态提示：用ng-if判断学生列表长度，为空时显示提示文本

测试一下，点击“加载第7学期学生”，表格就会显示Enamul Haque和Rahim Khan的信息；点击“加载第8学期学生”则显示Mahedee Hasan的信息，完全符合你的需求！

内容的提问来源于stack exchange，提问作者rodrigo.rodriguez