4

私のウェブアプリでは、ページに多くのフォームがあります。特定のフォーム用にAngularJSで送信したいと思います。

各フォームで、送信するには非表示の値を持つ一意のIDが必要です。ただし、表示されるvalue = "UNIQUE_ID"は、AngularJSの非表示の入力ボックスでは機能しません。

マイアプリページ

私のHTML

<div ng-app>
    <div ng-controller="SearchCtrl">
        <form class="well form-search">
            <input type="text" ng-model="keywords" name="qaq_id" value="UNIQUE_ID">
<pre ng-model="result">

    {{result}}

</pre>
        <form>
    </div>
</div>

これはjsスクリプトです 

function SearchCtrl($scope, $http) {
$scope.url = 'qa/vote_up'; // The url of our search

// The function that will be executed on button click (ng-click="search()")
$scope.search = function() {

// Create the http post request
// the data holds the keywords
// The request is a JSON request.
$http.post($scope.url, { "data" : $scope.keywords}).
success(function(data, status) {
    $scope.status = status;
    $scope.data = data;
    $scope.result = data; // Show result from server in our <pre></pre> element
})
.
error(function(data, status) {
    $scope.data = data || "Request failed";
    $scope.status = status;         
});
};
}
4

1 に答える 1

3

コードが機能しない唯一の理由は、 $scope.keywords が必要なオブジェクトではなく単純な変数 (テキスト値を持つ) である可能性があります - http://docs.angularjs.org/api/を参照してくださいng.$http#Usage

angularJS は独自のスコープ内の変数(モデル) で動作するため、フォームはそれらのモデルとやり取りするための手段になり、任意の方法で送信できます。
はい、非表示のフィールドを持つことができますが、angularJS では必要ありません。その情報は、コントローラー自体で定義する必要があるだけです-インスタンスごとにランダムに生成されるか、他のソースから受信されます.または、コントローラーのロード時に、たとえば、自分で定義することもできます。
そのため (わかりやすくするためにのみ)、formCtrl 内で formData 変数を定義すると、次のようになります。

HTML:

<div ng-app>
    <div ng-controller="SearchCtrl">
        <form class="well form-search">
            <input type="text" ng-model="formData.title">
            <input type="textarea" ng-model="formData.body">
            <button ng-click="sendData()">Send!</button>
        </form>
<pre ng-model="result">

    {{result}}

</pre>

    </div>
</div>

そしてあなたのコントローラー：

function SearchCtrl($scope, $http) {
$scope.url = 'qa/vote_up'; // The url of our search

// there is a formData object for each instance of
// SearchCtrl, with an id defined randomly

// Code from http://stackoverflow.com/a/1349426/1794563

function makeid()
{
  var text = "";
  var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

  for( var i=0; i < 5; i++ )
    text += possible.charAt(Math.floor(Math.random() * possible.length));

  return text;
}

$scope.formData = {
  title: "",
  text: ""
};

$scope.formData.id = makeid();

// The function that will be executed on button click (ng-click="sendData()")
$scope.sendData = function() {

  // Create the http post request
  // the data holds the keywords
  // The request is a JSON request.
  $http.post($scope.url, { "data" : $scope.formData}).
  success(function(data, status) {
    $scope.status = status;
    $scope.data = data;
    $scope.result = data; // Show result from server in our <pre></pre> element
  })
  .
  error(function(data, status) {
    $scope.data = data || "Request failed";
    $scope.status = status;         
    });
  };
}

また、html 自体に一意の ID を設定する場合は、input type="hidden" を追加し、その ng-model 属性を formData.id に設定すると、設定した値に関係なく、モデルにそれが設定されます。バインドされています。value 属性は ng-model を介して割り当てられた angularJS モデルを更新しないため、非表示の入力を使用しても機能しません。代わりに ng-init を使用して、値を設定します:

HTML と 2 つのフォーム:

<div ng-controller="SearchCtrl" ng-init="formData.id='FORM1'">
  <form class="well form-search">
    <input type="text" ng-model="formData.title">
    <input type="textarea" ng-model="formData.body">
    <button ng-click="sendData()">Send!</button>
  </form>
</div>
<div ng-controller="SearchCtrl" ng-init="formData.id='FORM2'">
  <form class="well form-search">
    <input type="text" ng-model="formData.title">
    <input type="textarea" ng-model="formData.body">
    <button ng-click="sendData()">Send!</button>
  </form>
</div>

隠しフィールドを追加できますが、それは何も達成しません - ng-init 属性が必要なすべてを行います。

于 2012-11-13T11:49:42.887 に答える