AngularJS表单存数组报错：Cannot read property 'push' of undefined

嘿，别慌！我刚学AngularJS的时候也踩过这个坑，这个报错的原因其实很直白：你要往里面塞数据的数组根本没被初始化，AngularJS找不到它，自然就没法调用push()方法啦。

核心问题分析 #

当你写$scope.userArray.push(xxx)的时候，如果$scope.userArray从来没被声明过，它的初始值就是undefined，对undefined调用push肯定会触发这个报错。

具体修正步骤 #

1. 先在控制器里初始化数组 #

打开你的formapp.js，确保在控制器里提前创建并初始化数组，这是最关键的一步：

angular.module('formApp', [])
.controller('FormController', function($scope) {
  // 关键！先把存储数据的数组初始化为空数组
  $scope.userArray = [];

  $scope.submitForm = function() {
    // 保险起见，先判断表单数据是否存在，避免空提交
    if ($scope.formData) {
      // 用angular.copy避免引用问题（不然后续修改表单会同步改掉数组里的已存内容）
      $scope.userArray.push(angular.copy($scope.formData));
      // 提交后清空表单，提升用户体验
      $scope.formData = {};
    }
  };
});

2. 检查HTML里的绑定是否正确 #

打开form.html，确保ng-app、ng-controller的名称和JS里完全匹配，同时ng-model要对应控制器里的变量：

<div ng-app="formApp" ng-controller="FormController">
  <form ng-submit="submitForm()">
    <input type="text" ng-model="formData.name" placeholder="输入姓名">
    <input type="email" ng-model="formData.email" placeholder="输入邮箱">
    <button type="submit">提交信息</button>
  </form>

  <!-- 可以加个列表验证数据是否成功存入数组 -->
  <h3>已提交的记录:</h3>
  <ul>
    <li ng-repeat="item in userArray">{{item.name}} - {{item.email}}</li>
  </ul>
</div>

额外注意事项 #

• 别拼错变量名！AngularJS里变量名是大小写敏感的，比如userArray和userarray会被当成两个不同的变量
• 一定要用angular.copy吗？是的，因为对象是引用类型，直接push$scope.formData的话，后续修改表单输入框内容时，数组里已存的数据也会跟着变，用copy就能彻底切断引用
• 如果还是报错，检查一下HTML里有没有正确引入formapp.js文件，控制器有没有被正确加载

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