使用 AngularJS 向表单添加行 [英] Adding lines to a form using AngularJS

查看：34 发布时间：2021/11/10 0:21:50 javascript arrays angularjs angularjs-ng-repeat

本文介绍了使用 AngularJS 向表单添加行的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试创建一个用户可以按+"号并添加新行的表单.我通过在单击按钮时调用一个函数然后将新行推入数组来完成此操作.但是，不会创建新行.下面删除该行的功能似乎正在工作.

这里是js:

var myApp = angular.module('myApp', []);myApp.controller('myController', ['$scope', '$q', function($scope, $q) {$scope.arr = [1,2];$scope.addLine = 函数(索引){$scope.arr.push();}$scope.removeLine = 函数(索引){$scope.arr.splice(index, 1);}}]);

解决方案

您需要将某些内容推送到数组中.

Push() 定义和用法:push() 方法向数组末尾添加新项，并返回新长度.

注意:新项目将被添加到数组的末尾.

注意:这个方法改变了数组的长度.

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

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

var myApp = angular.module('myApp', []);myApp.controller('myController', ['$scope',功能($范围){$scope.arr = [1, 2];$scope.addLine = 函数(索引){$scope.arr.push(index);}$scope.removeLine = 函数(索引){$scope.arr.splice(index, 1);}}]);

<html ng-app="myApp"><头><title>你好 AngularJS</title><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script><身体><div ng-controller="myController"><button name="addLine" ng-click="addLine(arr.length+1)">添加行</button>{{ arr |json}}<ul><li data-ng-repeat="x in arr">{{ x }} - <button name="addLine" ng-click="removeLine($index)">Remove Line</button>

</html>

I am trying to create a form that users can press the '+' sign and add a new line. I do this by calling a function when a button is clicked and then pushing a new line into the array. The new lines are not being created, however. The function below that removes the line seems to be working.

Here is the 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);
    }
}]);

解决方案

You need to push something into the array.

Push() Definition and Usage: The push() method adds new items to the end of an array, and returns the new length.

Note: The new item(s) will be added at the end of the array.

Note: This method changes the length of the array.

Tip: To add items at the beginning of an array, use the unshift() method.

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>

这篇关于使用 AngularJS 向表单添加行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

使用 AngularJS 向表单添加行 [英] Adding lines to a form using AngularJS

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

使用 AngularJS 向表单添加行 [英] Adding lines to a form using AngularJS

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭