Question

我的html是这样的：

<form ng-submit="addNews(news)" ng-controller='FormController'>

<input type="text" placeholder="autor" name="autor" ng-model="todos.autor">
<input type="submit" value="click">

{{todos.autor}}
{{todos}}

<span> <var>result:</var> <mark>{{result}}</mark></span>
</form>

使用ng-model指令输入（如您所见＆＃34; todos.autor＆＃34;）

我的控制器（FormController）是这样的：

$scope.addNews = function(news){

    $http.post('send_data.php', {'autor': $scope.todos.autor}).
    success(function(data, status) {
        $scope.status = status;
        $scope.data = data;
        $scope.result = data;
    })

最后我的php（send_data）：

<?php
$data = json_decode(file_get_contents("php://input"));
echo $data->autor;

?>

当用户点击提交时我从我的控制器调用addNews函数，此函数应该发送用户在输入中写入的数据，然后成功时$scope.result将包含信息，最后结果将是在html（<mark>{{result}}</mark>）中标记（一个简单的例子）。

问题是除非我将ng-model从todos.autor更改为简单autor并且控制器从{'autor': $scope.todos.autor}更改为{'autor':$scope.autor}（I验证了这一点）我真的需要todos.autor而不是简单autor

如何以这种方式实现受控发送数据？感谢

Answer 1

我认为你的问题在这里：

$http.post('send_data.php', {'autor': $scope.todos.autor})

您希望使用todos属性传递autor 对象，是吗？那么你需要：

给输入另一个名字

<input type="text" placeholder="autor" name="autor" 
   ng-model="autorName">

在控制器中定义todos对象，然后在调用addNews函数时，将autor属性及其值赋给todos对象：

var app = angular.module('app',[])
   .controller('FormController', function($scope) {

        $scope.todos = {};

        $scope.addNews = function(news){

            // assign the autor property and give it the
            // value from the form
            $scope.todos.autor = $scope.autorName;

            console.log($scope.todos.autor);    
        }; 
    });

现在你基本上得到：

$scope.todos = { autor : autorName }

请参阅演示 - http://jsbin.com/rotizoziro/1/edit?html,js,console,output

更新

由于上面的代码似乎有助于原始海报，我把它留在那里供参考。但是，正如所指出的那样，我的代码可以写得更干净。所以试着澄清一下：

我认为最初的海报问题是他们需要对象而不是简单的属性才能传回服务器。

来自O.P。：问题是没有显示结果，除非我将我的ng-model从todos.autor更改为简单的autor并且在控制器中从{'autor'：$ scope.todos.autor}更改为{'autor'：$ scope.autor}（我验证了这一点）我真的需要有todos.autor而不是简单的autor

这意味着需要设置和传递一个对象，如上所述，实现这一目标的更好方法是：保留最初的原始表格输入，即

<input type="text" placeholder="autor" name="autor" ng-model="todos.autor">
<input type="submit" value="click">

内部控制器

$scope.todos = {};

$scope.addNews = function(news){

            // when this function is called $scope.todos.autor will have a value assigned 
            // from when the user filled out the input field

            // send object to backend
            $http.post('send_data.php', {'autor': $scope.todos}).
            success(function(data, status) {
                $scope.status = status;
                $scope.data = data;
                $scope.result = data;
            }

在AngularJS中将表单数据发送到服务器

1 个答案:

更新