반응형
Angular-Formly : 사용자 클릭 시 Form 필드를 동적으로 추가
사용자가 "추가"를 클릭하여 더 많은 입력 필드를 추가할 수 있도록 양식에 기능을 추가하려면 어떻게 해야 합니까?이것은 각진 형태의 라이브러리를 사용합니다.
여기 정확한 특징의 예시가 있지만 angularjs만을 사용하여 수행됩니다.
이 플러그인 보기
여기 당신이 필요로 하는 것에 대한 예시가 있습니다.플렁커에서 볼 수 있듯이, 그것은.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);
};
});
간단한 예를 들겠습니다.
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>간단한 예제는 어떤 순서로든 삭제합니다.
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);
};
}
);
언급URL : https://stackoverflow.com/questions/32470928/angular-formly-adding-form-fields-dynamically-on-user-click
반응형
'source' 카테고리의 다른 글
| 쉽게 sinon stubs 치우기 (0) | 2023.09.19 |
|---|---|
| 데이터 프레임의 요인 수준 재정렬 (0) | 2023.09.19 |
| 시뮬레이터에서 앱을 실행할 수 없음: Xcode beta 6 iOS 8 (0) | 2023.09.19 |
| JAXP와 JAXB의 차이점은 무엇입니까? (0) | 2023.09.19 |
| JsonP를 사용한 JavaScript XMLHttpRequest (0) | 2023.09.19 |