Angular JS를 사용하여 양식의 여러 제출 버튼을 처리하는 방법?

Angular JS를 사용하여 양식의 여러 제출 버튼을 처리하는 방법?

앵귤러를 쓰고 있습니다.JS와 저는 사용자가 데이터를 입력할 수 있는 양식을 가지고 있습니다.양식의 끝에 저장하고 다른 페이지로 이동하는 "저장" 버튼과 양식을 저장한 후 재설정하는 "저장 및 추가" 버튼 두 개가 있으면 합니다.

어떻게 각도를 맞추면 됩니까?ng-click 태그가 있는 제출 버튼을 2개로 할 수 있다고 생각했는데 폼 요소에 ng-submit을 사용하고 있습니다.ng-submit을 사용해야 하는 이유가 있나요? 버튼을 ng-click하는 대신 왜 그것을 사용하기 시작했는지 기억이 나지 않습니다.

코드는 다음과 같습니다.

<div ng-controller="SomeController">
    <form ng-submit="save(record)">
        <input type="text" name="shoppingListItem" ng-model="record.shoppingListItem">
        <button type="submit">Save</button>
        <button type="submit">Save and Add Another</button>
    </form>
</div>

그리고 콘트롤러에서SomeController

$scope.record = {};
$scope.save = function (record) {
    $http.post('/api/save', record).
        success(function(data) {
            // take action based off which submit button pressed
        });
}

둘 다 가져도 됩니다.ng-click그리고.type="submit".에서ng-click컨트롤러의 파라미터를 업데이트하고 이벤트에서 이를 검증할 수 있습니다.ng-submit:

<div ng-controller="SomeController">
<form ng-submit="save(record)">
    <input type="text" name="shoppingListItem" ng-model="record.shoppingListItem">
    <button type="submit">Save</button>
    <button type="submit" ng-click="SaveAndAddClick=true">Save and Add Another</button>
</form>

따라서 이 방법을 사용하면 메소드를 추가한 다음 중복 코드를 호출할 수 없습니다.

감사해요.

ngSubmit누를 수 있게 해줍니다.Enter제출할 텍스트 상자에 입력하는 동안.그 행동이 중요하지 않다면 그냥 2를 사용하세요.ngClick. 중요한 경우 두번째 버튼을 사용하도록 수정할 수 있습니다.ngClick. 코드는 다음과 같습니다.

<div ng-controller="SomeController">
    <form ng-submit="save(record)">
        <input type="text" name="shoppingListItem" ng-model="record.shoppingListItem">
        <button type="submit">Save</button>
        <button ng-click="saveAndAdd(record)">Save and Add Another</button>
    </form>
</div>

그것들을 모두 단추로type=submit. 입력과 버튼을 섞고 맞추지 않는 것이 조금 더 깔끔합니다.따라서 기본적으로 하나의 버튼 클릭을 처리하기 위해 컨트롤러에서 하나의 방법을 실행하려고 하는 것입니다.

<div ng-controller="SomeController as sc">
        <form ng-submit="sc.execute(record)">
            <input type="text" name="shoppingListItem" ng-model="record.shoppingListItem">
            <button type="submit" ng-model="sc.saveButtonVal" ng-click="sc.saveButtonVal=true>Save</button>
            <button type="submit" ng-model="sc.saveAndAddButtonVal" ng-click="sc.saveAndAddButtonVal=true">Save and Add Another</button>
        </form>
</div>

js 파일에 이런 것이 있습니다.

function SomeController() {
        var sc = this;

        sc.execute = function(record) {
            //initialize the vars
            sc.saveButtonVal = false;
            sc.saveAndAddButtonVal = false;

            sc.resetButtonValues = function() {
                sc.saveButtonVal = false;
                sc.saveAndAddButtonVal = false;
            };

            if (sc.saveButtonVale) {
                //do save only operation
            } else if (sc.saveAndAddButtonVal) {
                //do save and add op
            }

           // reset your button vals
           sc.resetButtonValues();
    }
}

제가 봤을 때, 두 가지 옵션이 있습니다: 1: "다른 저장 후 추가" 버튼에서 ngClick 이벤트를 사용하고 "type='submit' 부분을 제거하는 것입니다.그런 다음 ngClick을 호출하는 함수에서 저장한 다음 값을 재설정하여 해당 함수 내에서 save()를 호출할 수 있습니다.2: ngSubmit을 모두 제거하고 두 버튼 모두 ngClicks만 사용합니다.

간단한 접근 방법을 찾고 있는 사람은 플래그를 만들고 버튼을 전환한 후 제출하기만 하면 됩니다.

<button type="{{isButton == true ? 'button' : 'submit'}}" >Save</button>
<button type="{{!isButton == true ? 'button' : 'submit'}}" >Update</button>

사용자 조치에 따라 플래그를 처리해야 합니다.

ng-submit은 다른 장점도 있습니다.예를 들어 잘못된 양식은 제출되지 않습니다.ng-click 대신 ng-submit을 사용하는 것이 항상 좋습니다.하지만, 당신의 시나리오에서, 더 나은 접근방식은

1. 버튼을 클릭합니다.
2. 컨트롤러에서 양식을 검증합니다.ng-click은 유효하지 않더라도 양식을 제출합니다.
3. 두 개의 다른 $scope라고 부릅니다.일부 컨트롤러에서 두 개의 다른 ng 클릭으로 기능합니다.

도움이 되길 바랍니다.

양식 요소에서 ng-submit을 제거하고 ng-click 기능을 'submit' 유형으로 각 버튼에 개별적으로 정의합니다.무효화 확인을 위해 양식 요소 태그에 이름 속성을 정의합니다.그리고 스코프 기능에서 validation을 확인합니다.

<div ng-controller="SomeController">
<form name="saveForm">
    <input type="text" name="shoppingListItem" ng-model="record.shoppingListItem">
    <button type="submit" ng-click="save(record)">Save</button>
    <button type="submit" ng-click="saveOther(record)">Save and Add Another</button>
</form>

스코프 기능:

$scope.record = {};

$scope.save = function (record) {    

if(this.saveForm.$valid)
  {

    $http.post('/api/save', record).
    success(function(data) {
        // take action based off which submit button pressed
    });
  }
}

언급URL : https://stackoverflow.com/questions/27025618/how-to-handle-multiple-submit-buttons-in-a-form-using-angular-js