html - 将变量添加到一组数组

Question

我正在使用 angular js 生成添加数组并在我们进行时显示它。到目前为止，给定的代码将一个数组添加到列表中，但它不会随着函数的按下而不断添加数组。

我是 Angular 的新手，我认为我缺少一些东西，但现在我被卡住了。

html 代码有一个按钮链接，应该执行该功能。

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {

  $scope.records = ["Testing Task 5.1", "Downloaded Task 5.1"];

  $scope.addArray = function() {
    $scope.records.unshift("saddfadffas")
  }

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-controller="myCtrl" class="container">
  <p>
    <h3>Status: </h3>
    <input type="text" ng-model="additem">
    <button ng-click="addArray()">function</button>
  </p>

  <ul ng-repeat="x in records">
    <li>{{x}}</li>
  </ul>
</div>

Answer 1

您可以通过让数组中的项目按其位置而不是其值作为键来解决此问题。为此，您可以使用 track by $index。希望这对您有所帮助!

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {

  $scope.records = ["Testing Task 5.1", "Downloaded Task 5.1"];

  $scope.addArray = function() {
    $scope.records.unshift("saddfadffas")
  }

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="myCtrl" class="container">
  <p>
    <h3>Status: </h3>
    <input type="text" ng-model="additem">
    <button ng-click="addArray()">function</button>
  </p>

  <ul ng-repeat="x in records track by $index">
    <li>{{x}}</li>
  </ul>

</div>