2017-05-09 11 views
0

나는이anuglar js를 사용하여 버튼 클릭시 동적 입력 필드를 만드는 방법은 무엇입니까?

enter image description here

같은 드롭 다운 메뉴가 [ShortAnswer- 텍스트 상자, 체크 박스, 라디오 버튼과 드롭 다운] 사용자가 입력 유형을 선택할 수 있고, 추가 옵션 버튼을 클릭하여 옵션이 추가 할 수 있습니다 이와 같이 enter image description here

십자형 아이콘을 클릭하여 옵션을 제거해야합니다.

나는

http://viralpatel.net/blogs/dynamic-add-textbox-input-button-radio-element-html-javascript/ 

dynamic text area을 reffered하지만, 나에게 각 JS를 사용하여이를 달성하기 위해 아이디어를 제안하십시오 나는 이것에 대해 더 많은 참조가 필요합니다.

+0

이전에 비슷한 작업을 했어야했습니다. 드래그 드롭 지원을 추가하려면 ng-sortable (https://github.com/a5hik/ng-sortable) –

답변

1

각 입력을 정의하는 객체의 배열로부터 입력 목록을 작성하십시오. 단추를 클릭하여 추가 할 입력을 정의하는 배열에 새 개체를 추가합니다.

HTML :

<div ng-repeat="input in inputsList"> 
    <span ng-click="remove($index)>x</span><input ng-if="input.type==='text'" type="text" /> 
    <span ng-click="remove($index)>x</span><input ng-if="input.type==='checkbox'" type="checkbox" /> 
    ... 
</div> 
<button ng-click="addNewCheckBox()">Add</button> 

컨트롤러 : 당신이 설정 객체를했다 사용자 정의 입력 지시했다하고 구축 할 수있는 입력을 결정한다면 그것은 아마도 가장 좋은 것입니다

$scope.addNewCheckBox = function() { 
    $scope.inputsList.push({ type: 'checkbox' }); 
}; 

$scope.remove = function(index) { 
    $scope.inputsList.splice(index, 1); 
}; 

. 하지만 단순하고 명료하게하기 위해 기본 HTML 입력을 사용했습니다.

그것이 의미가 있는지 또는 각도 2/4 답이 필요한지 알려주세요.