AngularJS가 숨겨진 필드 값을 전송하지 않음

AngularJS가 숨겨진 필드 값을 전송하지 않음

특정 사용 사례에 대해서는 단일 양식을 "구식"으로 제출해야 합니다.즉, action = action이 있는 폼을 사용합니다.응답이 스트리밍되므로 페이지를 새로고침하지 않습니다.일반적인 앵귤러(Angular)는JS앱은 그렇게 폼을 제출하지 않을 것입니다만, 현재로서는 어쩔 수 없습니다.

즉, Angular의 숨겨진 필드를 입력하려고 했습니다.

<input type="hidden" name="someData" ng-model="data" /> {{data}}

데이터에 올바른 값이 표시됩니다.

폼은 표준 폼과 같습니다.

<form id="aaa" name="aaa" action="/reports/aaa.html" method="post">
...
<input type="submit" value="Export" />
</form>

[ Submit ]를 눌러도 서버에 값이 전송되지 않습니다.입력 필드를 "텍스트"로 변경하면 예상대로 작동합니다.숨겨진 필드는 실제로 채워지지 않은 반면 텍스트 필드는 양방향 바인딩으로 표시됩니다.

어떻게 하면 AngularJS가 채워진 숨겨진 필드를 제출할 수 있을까요?

숨김 필드에는 이중 바인딩을 사용할 수 없습니다.해결책은 다음과 같이 괄호를 사용하는 것입니다.

<input type="hidden" name="someData" value="{{data}}" /> {{data}}

편집 : github에서 다음 스레드를 참조하십시오.https://github.com/angular/angular.js/pull/2574

편집:

Angular 1.2부터는 'ng-value' 디렉티브를 사용하여 식을 입력 값 속성에 바인딩할 수 있습니다.이 지시어는 입력 무선 또는 체크박스와 함께 사용해야 하지만 숨겨진 입력과 함께 사용할 수 있습니다.

ng-value를 사용한 솔루션은 다음과 같습니다.

<input type="hidden" name="someData" ng-value="data" />

다음은 입력이 숨겨진 ng-value를 사용하는 바이올린입니다.http://jsfiddle.net/6SD9N

하실 수 .type=text ★★★★★★★★★★★★★★★★★」display:none;앵귤러OP가 말하듯이, 보통 당신은 이것을 하지 않을 것입니다만, 이것은 특별한 경우처럼 보입니다.

<input type="text" name="someData" ng-model="data" style="display: none;"/>

컨트롤러 내:

$scope.entityId = $routeParams.entityId;

보기:

<input type="hidden" name="entityId" ng-model="entity.entityId" ng-init="entity.entityId = entityId" />

사피엔스웍스에서 마이크가 쓴 멋진 해결책을 찾았어요.모델의 변경을 감시하는 지시어를 사용하는 것만으로 간단합니다.

.directive('ngUpdateHidden',function() {
    return function(scope, el, attr) {
        var model = attr['ngModel'];
        scope.$watch(model, function(nv) {
            el.val(nv);
        });
    };
})

다음으로 입력을 바인드합니다.

<input type="hidden" name="item.Name" ng-model="item.Name" ng-update-hidden />

하지만 tyme가 제공하는 솔루션은이 투고에서 yycorman이 말한 바와 같이 javascript에서 입력 숨김이 변경 이벤트를 발생시키지 않기 때문에 jQuery 플러그인에서 값을 변경할 때 JV는 계속 작동합니다.

편집 변경 이벤트가 트리거될 때 새 값을 모델에 다시 적용하도록 지시문을 변경했으므로 입력 텍스트로 작동합니다.

.directive('ngUpdateHidden', function () {
    return {
        restrict: 'AE', //attribute or element
        scope: {},
        replace: true,
        require: 'ngModel',
        link: function ($scope, elem, attr, ngModel) {
            $scope.$watch(ngModel, function (nv) {
                elem.val(nv);
            });
            elem.change(function () { //bind the change event to hidden input
                $scope.$apply(function () {
                    ngModel.$setViewValue(  elem.val());
                });
            });
        }
    };
})

에, 「」를 트리거 하면,$("#yourInputHidden").trigger('change')jQuery를 사용한 이벤트는 바인딩된 모델도 업데이트합니다.

이 숨겨진 값()에 대한 이상한 동작을 발견하여 작동하지 않습니다.

여러 번 살펴본 결과, 최상의 방법은 폼 범위 이후 컨트롤러 자체에 값을 정의하는 것입니다.

.controller('AddController', [$scope, $http, $state, $stateParams, function($scope, $http, $state, $stateParams) {

    $scope.routineForm = {};
    $scope.routineForm.hiddenfield1 = "whatever_value_you_pass_on";

    $scope.sendData = function {

// JSON http post action to API 
}

}])

저는 이것을 -를 통해 달성했습니다.

 <p style="display:none">{{user.role="store_user"}}</p>

update @tymeJV의 답변:

 <div style="display: none">
    <input type="text" name='price' ng-model="price" ng-init="price = <%= @product.price.to_s %>" >
 </div>

저도 같은 문제에 직면해 있었습니다만, jsp에서 Java 스크립트로 키를 보내야 합니다.하루 중 4시간 이상 걸립니다.

이 태그를 JavaScript/J에 포함시킵니다.SP:

 $scope.sucessMessage = function (){  
    	var message =     ($scope.messages.sucess).format($scope.portfolio.name,$scope.portfolio.id);
    	$scope.inforMessage = message;
    	alert(message);  
}
 

String.prototype.format = function() {
    var formatted = this;
    for( var arg in arguments ) {
        formatted = formatted.replace("{" + arg + "}", arguments[arg]);
    }
    return formatted;
};

<!-- Messages definition -->
<input type="hidden"  name="sucess"   ng-init="messages.sucess='<fmt:message  key='portfolio.create.sucessMessage' />'" >

<!-- Message showed affter insert -->
<div class="alert alert-info" ng-show="(inforMessage.length > 0)">
    {{inforMessage}}
</div>

<!-- properties
  portfolio.create.sucessMessage=Portf\u00f3lio {0} criado com sucesso! ID={1}. -->

결과는 Portfolio 1 criado com successo!ID = 3 。

안부 전합니다

만약 누군가가 이것에 대해 아직 어려움을 겪고 있다면, 나는 멀티페이징 폼에서 사용자 세션/사용자 ID를 추적하려고 할 때 비슷한 문제가 있었다.

저는 그것을 수정했습니다.

.when/q2/:uid"가 라우팅에 포함되어 있는 경우:

    .when("/q2/:uid", {
        templateUrl: "partials/q2.html",
        controller: 'formController',
        paramExample: uid
    })

그리고 이것을 숨김 필드로 추가하여 웹폼 페이지 간에 매개 변수를 전달합니다.

<< 입력 유형="숨김" 필수 ng-model="formData.userid" ng-init="formData.userid=uid" />

Angular가 처음이라 최선의 해결책은 잘 모르겠지만 지금은 잘 되는 것 같아요.

에서 모델에 직접 값을 할당합니다.data-ng-value기여하다.각도 인터프리터는 숨겨진 필드를 ngModel의 일부로 인식하지 않기 때문입니다.

<input type="hidden" name="pfuserid" data-ng-value="newPortfolio.UserId = data.Id"/>

숨겨진 입력에 값을 설정하기 위해 클래식 Javascript를 사용합니다.

$scope.SetPersonValue = function (PersonValue)
{
    document.getElementById('TypeOfPerson').value = PersonValue;
    if (PersonValue != 'person')
    {
        document.getElementById('Discount').checked = false;
        $scope.isCollapsed = true;
    }
    else
    {
        $scope.isCollapsed = false;
    }
}

아래 코드는 이 IFF에 대해 전술한 것과 같은 순서로 동작합니다.주문이 type then name, ng-model ng-init, value인 것을 확인합니다.바로 그거야.

여기서 작업 코드를 공유하겠습니다.

<input type="text" name="someData" ng-model="data" ng-init="data=2" style="display: none;"/>
OR
<input type="hidden" name="someData" ng-model="data" ng-init="data=2"/>
OR
<input type="hidden" name="someData" ng-init="data=2"/>

언급URL : https://stackoverflow.com/questions/18446359/angularjs-does-not-send-hidden-field-value