如何在AngularJS中单击按钮时动态添加输入字段？(1)

📌 相关文章

📜 如何在AngularJS中单击按钮时动态添加输入字段？(1)

📅 最后修改于: 2023-12-03 15:08:51.511000 🧑 作者: Mango

在AngularJS中单击按钮时动态添加输入字段

在AngularJS中，可以通过指令ng-click来实现按钮点击事件。在点击按钮时，可以动态地向DOM中添加输入字段。具体实现步骤如下：

1. 创建HTML文件

首先，创建一个HTML文件，并引入AngularJS框架。

<!DOCTYPE html>
<html ng-app="app">
<head>
    <meta charset="UTF-8">
    <title>动态添加输入字段</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="ctrl">
  <div>
    <button ng-click="addInput()">添加输入字段</button>
    <div ng-repeat="input in inputs">
      <input type="text" ng-model="input">
    </div>
  </div>
</body>
</html>

2. 创建AngularJS模块和控制器

接着，创建AngularJS模块和控制器，用于处理动态添加输入字段的逻辑。

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

app.controller('ctrl', function($scope) {
  $scope.inputs = [];

  $scope.addInput = function() {
    $scope.inputs.push('');
  };
});

3. 解释代码

在HTML文件中，我们使用了ng-repeat指令来遍历inputs数组中存储的输入字段。通过ng-click指令调用addInput函数，在控制器中向inputs数组中添加一个空字符串。随后，ng-repeat指令会自动渲染新添加的输入字段。当用户继续点击“添加输入字段”按钮时，addInput函数会再次被调用，inputs数组会增加一个新的元素，从而动态地添加新的输入字段。

返回Markdown格式的代码片段

# 在AngularJS中单击按钮时动态添加输入字段

在AngularJS中，可以通过指令ng-click来实现按钮点击事件。在点击按钮时，可以动态地向DOM中添加输入字段。具体实现步骤如下：

## 1. 创建HTML文件

首先，创建一个HTML文件，并引入AngularJS框架。

```html
<!DOCTYPE html>
<html ng-app="app">
<head>
    <meta charset="UTF-8">
    <title>动态添加输入字段</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="ctrl">
  <div>
    <button ng-click="addInput()">添加输入字段</button>
    <div ng-repeat="input in inputs">
      <input type="text" ng-model="input">
    </div>
  </div>
</body>
</html>

2. 创建AngularJS模块和控制器

接着，创建AngularJS模块和控制器，用于处理动态添加输入字段的逻辑。

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

app.controller('ctrl', function($scope) {
  $scope.inputs = [];

  $scope.addInput = function() {
    $scope.inputs.push('');
  };
});