在AngularJS中,可以通过button的click事件来动态添加<input>元素。下面是一个示例代码:
HTML部分:
<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click="addInput()">添加输入框</button>
<div ng-repeat="input in inputs">
<input type="text" ng-model="input.value">
</div>
</div>
AngularJS部分:
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.inputs = [];
$scope.addInput = function() {
$scope.inputs.push({ value: '' });
};
});
在上面的代码中,我们首先定义了一个按钮,当按钮被点击时,会调用addInput()
函数。该函数会向inputs
数组中添加一个新的对象,该对象包含一个value
属性,用于绑定输入框的值。
接着,我们使用ng-repeat
指令来遍历inputs
数组,并为每个元素创建一个<input>元素。通过ng-model
指令,将每个输入框与对应的input.value
属性进行双向绑定。
这样,每次点击按钮时,都会动态添加一个新的输入框。
推荐的腾讯云相关产品和产品介绍链接地址:
AngularJS HTML DOM
AngularJS为HTML DOM 元素的属性提供了绑定应用数据的指令。
ng-disabled指令
ng-disabled指令直接绑定应用数据到HTML的disabled属性。
实例:
<button ng-disableled="mySwitch">点我!</button
领取专属 10元无门槛券
手把手带您无忧上云