使用 AngularJS 向表单添加行答案

【问题标题】：Adding lines to a form using AngularJS使用 AngularJS 向表单添加行
【发布时间】：2015-11-11 23:50:31
【问题描述】：

我正在尝试创建一个用户可以按“+”号并添加新行的表单。我通过在单击按钮时调用一个函数然后将新行推入数组来做到这一点。但是，并未创建新行。下面删除该行的功能似乎正在工作。

这里是js：

var myApp = angular.module('myApp', []);

myApp.controller('myController', ['$scope', '$q', function($scope, $q) {
    $scope.arr = [1,2];
    $scope.addLine = function(index){
        $scope.arr.push();
    }
    $scope.removeLine = function(index){
        $scope.arr.splice(index, 1);
    }
}]);

【问题讨论】：

我更新了下面的脚本，它应该是一个可靠的答案。请查看。

标签： javascript arrays angularjs angularjs-ng-repeat

【解决方案1】：

你需要往数组里推一些东西。

Push() 定义和用法： push() 方法将新项目添加到数组的末尾，并返回新的长度。

注意：新项目将被添加到数组的末尾。

注意：这个方法改变了数组的长度。

提示：要在数组的开头添加项目，请使用 unshift() 方法。

http://www.w3schools.com/jsref/jsref_push.asp

var myApp = angular.module('myApp', []);

myApp.controller('myController', ['$scope',
  function($scope) {

    $scope.arr = [1, 2];
    $scope.addLine = function(index) {
      $scope.arr.push(index);
    }
    $scope.removeLine = function(index) {
      $scope.arr.splice(index, 1);
    }
  }
]);

<!doctype html>
<html ng-app="myApp">

<head>
  <title>Hello AngularJS</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>

<body>
  <div ng-controller="myController">
    <button name="addLine" ng-click="addLine(arr.length+1)">Add Line</button>
    {{ arr | json}}

    <ul>
      <li data-ng-repeat="x in arr">
        {{ x }}  - <button name="addLine" ng-click="removeLine($index)">Remove Line</button>
      </li>
    </ul>

  </div>
</body>

</html>

【讨论】：

【解决方案2】：

看这个：

var app = angular.module('App', []);

app.controller('AppController', ['$scope', function($scope) {
    $scope.arr = [1,2];
    $scope.addLine = function(last){
        $scope.arr.push(last + 1);
    }
    $scope.removeLine = function(index){
        $scope.arr.splice(index, 1);
    }
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="App" ng-controller="AppController">
    <button ng-click="addLine(arr.length)">Add Line</button>
    <hr/>
    <div data-ng-repeat="x in arr">
        Line: {{x}} <button ng-click="removeLine($index)">Del</button>
    </div>
</div>

【讨论】：

这似乎与我的答案重复。您有什么独特之处要补充吗？
我尝试了您的示例，但无法使其正常工作。我的例子也不同，我没有使用 $ q 。但从我所见，您的示例现在有效。
我在 26 分钟前编辑了它，你在 10 分钟后添加了你的。$q 是提问者代码留下的。它实际上并没有被使用。只是好奇为什么重复。谢谢。
对的人！我在第一次测试中的说话方式对我不起作用。插入新寄存器后，您的代码不会呈现数据。但是为了不产生问题，我删除了这个响应