Question

在我的网络应用中，页面上有很多表单。我想用特定形式的 AngularJS 提交它。

在每种形式中，都需要提交具有隐藏价值的唯一ID。但是看到的值=“UNIQUE_ID”在 AngularJS 中的隐藏输入框中不起作用。

My Apps Page

我的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;         
});
};
}

Answer 1

可能是您的代码无效的唯一原因是$ scope.keywords是一个简单的变量（带有文本值）而不是Object，这是必需的 - 请参阅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，~~你可以添加一个输入类型=“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属性可以完成你需要的一切。

使用隐藏的<input />值发送POST在AngularJs中不起作用

1 个答案: