如何在AngularJS中将对象数组推入作用域数组？

没问题，我来帮你搞定这个需求，先给你一个完整的可运行示例，再拆解关键步骤：

完整实现代码 #

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">
  <!-- 展示每个班级及其学生 -->
  <div ng-repeat="cls in records">
    <h2>{{cls.Class}}</h2>
    <p>学生列表：</p>
    <ul>
      <li ng-repeat="student in cls.students">{{student.name}}</li>
    </ul>
  </div>

  <!-- 添加学生的输入区域 -->
  <div>
    <input ng-model="formdata.studentName" type="text" placeholder="输入学生姓名" />
    <select ng-model="selectedClass" ng-options="cls as cls.Class for cls in records">
      <option value="">选择班级</option>
    </select>
    <input type="button" value="添加学生" ng-click="saveStudent()" />
  </div>

  <!-- 批量添加班级的按钮 -->
  <input type="button" value="批量添加班级" ng-click="addBatchClasses()" />

  <script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
      // 初始化作用域中的班级数组
      $scope.records = [
        { Class: "一年级一班", students: [{name: "张三"}, {name: "李四"}] },
        { Class: "一年级二班", students: [{name: "王五"}] }
      ];

      // 初始化表单数据
      $scope.formdata = { studentName: '' };
      $scope.selectedClass = null;

      // 单个添加学生到指定班级的方法
      $scope.saveStudent = function() {
        // 验证输入是否合法
        if (!$scope.selectedClass || !$scope.formdata.studentName.trim()) {
          alert('请选择班级并输入学生姓名');
          return;
        }

        // 创建学生对象
        var newStudent = { name: $scope.formdata.studentName.trim() };
        // 将学生对象推入选中班级的students数组
        $scope.selectedClass.students.push(newStudent);

        // 清空输入框
        $scope.formdata.studentName = '';
      };

      // 批量添加班级数组到records的方法
      $scope.addBatchClasses = function() {
        // 准备要添加的班级数组
        var newClasses = [
          { Class: "一年级三班", students: [{name: "赵六"}, {name: "孙七"}] },
          { Class: "一年级四班", students: [] }
        ];

        // 将数组中的所有对象推入records数组
        // 方法1：使用apply（兼容旧环境）
        Array.prototype.push.apply($scope.records, newClasses);
        // 方法2：使用ES6展开运算符（如果环境支持）
        // $scope.records.push(...newClasses);
      };
    });
  </script>
</body>
</html>

关键知识点拆解 #

1. 初始化作用域数组
   一定要先初始化$scope.records为数组，避免后续调用push时出现undefined错误，比如：

   $scope.records = []; // 或者初始填充一些数据
   

2. 单个对象推入数组
   使用数组的push()方法直接添加单个对象，比如添加学生到班级的students数组：

   $scope.selectedClass.students.push(newStudent);
   

3. 数组批量推入
   如果要把一个对象数组整体推入作用域数组，有两种常用方式：

   • 用Array.prototype.push.apply()：兼容旧版JavaScript环境
   • 用ES6展开运算符...：更简洁，但需要环境支持ES6

4. 视图绑定注意事项
   你原来的代码里ng-repeat="s in records.students"是错误的，因为records是一个数组，需要先循环每个班级（cls in records），再循环该班级的学生（student in cls.students），AngularJS才能正确渲染数据。

5. 自动视图更新
   AngularJS会自动监听作用域数组的变化（比如push操作），不需要手动触发$digest或$apply，视图会自动更新显示新数据。

内容的提问来源于stack exchange，提问作者user1187