AngularJS数组添加问题：点击按钮无法持续添加数组元素

嘿，刚接触AngularJS遇到这种问题太正常了，我当初学的时候也踩过类似的坑！咱们先扒一扒问题出在哪，再一步步解决。

问题根源 #

你现在只能添加一次数组项，大概率是添加函数的逻辑写错了——比如你可能是直接用新值覆盖了整个数组，而不是往原数组里追加新元素。AngularJS的双向绑定依赖数组本身的变更来更新视图，要是你把数组替换成新的（比如$scope.records = [新内容]），第一次加完之后，后续操作就会把之前的内容覆盖掉，看起来就像只能加一次。

修正后的完整代码 #

我把你的代码补全并修正，你可以直接参考：

HTML部分

<div ng-app="myApp" ng-controller="myCtrl">
  <!-- 绑定输入框到模型，用来获取用户输入的新项 -->
  <input type="text" ng-model="newRecord" placeholder="输入新任务">
  <!-- 点击按钮触发添加函数 -->
  <button ng-click="addItem()">添加任务</button>

  <!-- 实时展示数组内容 -->
  <h3>任务列表</h3>
  <ul>
    <!-- track by $index 避免重复元素时ng-repeat报错，新手必备 -->
    <li ng-repeat="record in records track by $index">{{record}}</li>
  </ul>
</div>

JavaScript部分

var app = angular.module("myApp", []); 
app.controller("myCtrl", function($scope) { 
  // 初始化数组
  $scope.records = ["Testing Task 5.1", "Downloaded ..."];
  
  // 定义正确的添加函数
  $scope.addItem = function() {
    // 先判断输入内容不为空（可选，但提升体验）
    if ($scope.newRecord && $scope.newRecord.trim() !== "") {
      // 用push方法往原数组末尾追加新元素，这是关键！
      $scope.records.push($scope.newRecord.trim());
      // 添加后清空输入框，方便下次输入
      $scope.newRecord = "";
    }
  };
});

关键要点解释 #

1. 用push()而不是重新赋值数组：push()会在原数组的基础上添加新元素，AngularJS能检测到数组的变更，自动更新视图；如果直接赋值（比如$scope.records = [...]），会替换掉整个数组，之前的内容就没了。
2. 正确绑定ng-model和ng-click：输入框的ng-model="newRecord"用来把用户输入的内容同步到控制器的$scope.newRecord，按钮的ng-click="addItem()"则是触发添加逻辑。
3. track by $index的作用：如果数组里出现重复的内容，AngularJS的ng-repeat会报错，加上这个可以让每个项以索引为唯一标识，避免报错。

这样修改之后，你点击按钮就能持续添加新的数组项，视图也会实时更新啦～

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