如何在表单中添加功能,以便用户可以通过单击"添加"来添加更多输入字段。这使用了有角度的形式库。
以下是精确功能的示例,但仅使用angularjs。
答案 0 :(得分:15)
以下是您需要的示例。正如您在plunker中看到的那样,有一个TextArea
可以在按钮点击时动态创建。也可以点击TextAreas
按钮删除创建的remove
。
请参阅下面的 HTML
<div class="col-sm-10">
<input type="button" class="btn btn-info" ng-click="addNewChoice()" value="ADD QUESTION">
<div class="col-sm-4">
<fieldset data-ng-repeat="field in choiceSet.choices track by $index">
<textarea rows="4" cols="50" ng-model=" choiceSet.choices[$index]"></textarea>
<button type="button" class="btn btn-default btn-sm" ng-click="removeChoice($index)">
<span class="glyphicon glyphicon-minus"></span> REMOVE
</button>
</fieldset>
</div>
</div>
和 JS 将如下所示
var app = angular.module('myApp', []);
app.controller('inspectionController', function($scope, $http) {
$scope.choiceSet = {
choices: []
};
$scope.quest = {};
$scope.choiceSet.choices = [];
$scope.addNewChoice = function() {
$scope.choiceSet.choices.push('');
};
$scope.removeChoice = function(z) {
$scope.choiceSet.choices.splice(z, 1);
};
});
答案 1 :(得分:11)
我举了一个简单的例子。
var app = angular.module("app",[]);
app.controller("MyCtrl" , function($scope){
$scope.data ={
names:[{ name:""}]
};
$scope.addRow = function(index){
var name = {name:""};
if($scope.data.names.length <= index+1){
$scope.data.names.splice(index+1,0,name);
}
};
$scope.deleteRow = function($event,name){
var index = $scope.data.names.indexOf(name);
if($event.which == 1)
$scope.data.names.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="MyCtrl">
<table>
<tr ng-repeat="name in data.names track by $index">
<td> <input type="text" ng-model="data.names[$index].name"></td>
<td> <input type="button" ng-click="addRow($index)" value="Add" ng-show="$last"></td>
<td> <input type="button" ng-click="deleteRow($event,name)" value="Delete" ng-show="$index != 0"></td>
</tr>
</table>
<span>{{data|json}}</span>
</div>
答案 2 :(得分:0)
简单示例也可以按任何顺序删除:
http://plnkr.co/edit/c0FbjBJkHtDYRKslz0iq?p=preview
或:
某些HTML:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="oneApp" ng-controller="ctrl">
<button ng-click="addNewRow()">Add row</button>
<table>
<tr ng-repeat="row in tablerows track by $id(row)">
<td ng-model="tablerows[$index]">
<input>
</td>
<td>
<button ng-click="removeRow($index)" type="button">
Delete
</button>
<td>
</tr>
</table>
</body>
</html>
<强>的script.js:强>
var app = angular.module('oneApp', []);
app.controller('ctrl', function($scope){
$scope.tablerows = [];
$scope.addNewRow = function () {
var row_id;
var tablerows = $scope.tablerows;
if(tablerows.length > 0){
row_id = tablerows[tablerows.length-1];
row_id = row_id +1;
}else{
row_id = 0;
}
$scope.tablerows.push(row_id);
};
$scope.removeRow = function (index) {
$scope.tablerows.splice(index,1);
};
}
);