192

特定のユースケースでは、「古い方法」で単一のフォームを送信する必要があります。つまり、action="" を含むフォームを使用します。応答はストリーミングされるため、ページをリロードしていません。私は、典型的な AngularJS アプリがそのようにフォームを送信しないことを完全に認識していますが、これまでのところ他に選択肢がありません。

そうは言っても、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>

送信を押しても、値はサーバーに送信されません。入力フィールドを「テキスト」タイプに変更すると、期待どおりに機能します。私の仮定では、非表示フィールドには実際にはデータが入力されていませんが、テキスト フィールドは実際には双方向バインディングのために表示されています。

AngularJS によって入力された隠しフィールドを送信する方法はありますか?

4

13 に答える 13

290

非表示フィールドで二重バインディングを使用することはできません。解決策は、ブラケットを使用することです:

<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

于 2013-08-26T14:38:42.783 に答える
8

コントローラーで:

$scope.entityId = $routeParams.entityId;

ビューで:

<input type="hidden" name="entityId" ng-model="entity.entityId" ng-init="entity.entityId = entityId" />
于 2014-07-02T22:54:51.923 に答える
1

@tymeJV の回答を更新します。例:

 <div style="display: none">
    <input type="text" name='price' ng-model="price" ng-init="price = <%= @product.price.to_s %>" >
 </div>
于 2016-04-15T02:37:54.333 に答える
1

私はこれを達成しました -

 <p style="display:none">{{user.role="store_user"}}</p>
于 2015-11-23T13:03:56.687 に答える
0

data-ng-valueモデルの属性に値を直接割り当てます。Angular インタープリターは隠しフィールドを ngModel の一部として認識しないためです。

<input type="hidden" name="pfuserid" data-ng-value="newPortfolio.UserId = data.Id"/>
于 2016-12-03T15:56:11.007 に答える
0

私は同じ問題に直面していました.JSPからJavaスクリプトにキーを送信する必要があります.それを解決するには、1日のうち約4時間以上かかります.

JavaScript/JSP に次のタグを含めます。

 $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}. -->

結果は次のとおりです。ポートフォリオ 1 criado com sucesso! ID=3。

よろしくお願いします

于 2015-04-02T14:46:43.407 に答える
0

誰かがまだこれに苦労している場合に備えて、マルチページフォームでユーザーセッション/ユーザーIDを追跡しようとしたときに同様の問題が発生しました

追加して修正しました

.when("/q2/:uid" ルーティング:

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

これを非表示フィールドとして追加して、Webフォームページ間でパラメーターを渡します

<< input type="hidden" required ng-model="formData.userid" ng-init="formData.userid=uid" />

私はAngularを初めて使用するので、それが最善の解決策かどうかはわかりませんが、今はうまくいくようです

于 2016-02-28T16:16:26.473 に答える
0

古典的な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;
    }
}
于 2016-12-22T11:00:30.887 に答える