AngularJS 리피터에서 폼에 동적으로 컨트롤 추가 제출

Question

리피터에 포함 된 하위 개체의 개체와 배열을 나타내는 폼이 있습니다. 배열에 하위 오브젝트를 동적으로 추가하려고합니다. 하위 오브젝트를 추가하면 양식이 예기치 않게 제출됩니다.

http://plnkr.co/edit/TUblgmb7N710nPL7s5tU?p=preview

내 양식은 다음과 같습니다 :

컨트롤러는 다음과 같습니다

<form ng-submit="handleSubmit()" ng-controller="TestController"> 
    <div>Some Input: <input type="text"></div> 

    <div ng-repeat="obj in model.children"> 
    <input type="text" ng-model="obj.text" /> 
    </div> 

    <button ng-click="addChild()"> Add Child</button> 

</form> 

...

Controllers.controller('TestController', ["$scope", function($scope) { 

    $scope.model = { 
    name: "Some Text", 
    children: [] 
    }; 

    $scope.handleSubmit = function() { 
    alert("Form Submitted!"); 
    } 

    $scope.addChild = function() { 
    $scope.model.children.push({text:"Foo"}); 
    } 


}]); 

은 "자식 추가를 클릭

이 예제를 참조하십시오 "버톤. UI가 예상대로 업데이트되지만 양식이 제출됩니다.

폼의 ng-submit 대신 ng-click 버튼을 눌러 제출 기능을 넣으면이 문제를 해결할 수 있지만 예기치 않은 동작처럼 보입니다. 아무도 설명 할 수 있을까요?

Answer 1

기본 속성 유형는 HTML 버튼 태그 <button>My Button</button>는 가 <input type = "submit"...>이처럼 이벤트 제출 트리거합니다.

는

지금, @GruffBunny의 생각 다음, 내가 어떤 버튼을 표시하도록하는 방법에 pInputType 매개 변수를 추가 한 클릭 된 :

이

$scope.addChild = function(pInputType) { 
    $scope.model.children.push({text:"Foo", inputType : pInputType }); 
} 

그런 다음 HTML 블록, 속성 inputType 루프 내에서 추가 된 다음과 같이 :

<!-- With Input Type --> 
<h2>Input type Button</h2> 
<input type="button" ng-click="addChild('Input type Button')" value="Btn Add Child" /> 
<hr /> 
<!-- With Normal Anchor --> 
<h2>HTML Anchor</h2> 
<a href="#" ng-click="addChild('HTML Anchor')">Add Child Link</a> 
<hr /> 
<!-- Adding Bootstrap --> 
<h2>HTML Bootstrap Anchor</h2> 
<a href="#" ng-click="addChild('HTML Bootstrap Anchor')" class="btn btn-info"> Add Child Link</a> 
<hr /> 
<!-- Button Tag --> 
<h2>HTML Button Tag (Triggers SUbmit Events)</h2> 
<button ng-click="addChild('Triggers Submit Events')">Add Child</button> 
<hr /> 

:

<div ng-repeat="obj in model.children"> 
    <hr /> 
    <h3>{{obj.inputType}}</h3> 
    <div>New Input: <input type="text" ng-model="obj.text" /></div> 
</div> 

마지막으로, 여기에 코드를 테스트하기위한 단추가 있습니다

여기 전체 plunker입니다 : <button> vs. <input type="button" />. Which to use?

나는 그것이 사람이 설명이 도움이 될 수있는 희망 : http://plnkr.co/edit/N4hSjG

이 문제에 대한 자세한 내용은,이 스택 오버플로 질문을 읽을 수 있습니다.