如何使用php和angularjs从模态中检索发布数据

Question

I have been trying for 5 hours but still no luck!

I want to

Submit a modal within index.html and the submited data should be printed using php and angular js.

My code index.html:
           <div class="container" ng-controller="myCrudController">
    <div class="row">
        <div class="col s12">
            <h4>Products</h4>
            <form id="modal-product-form" class="modal" >
                <div class="modal-content">
                    <h5 id="modal-product-title"></h5>
                    <div class="row">
                        <div class="input-field col s12">
                            <input  type="text" class="validate" id="form-name" placeholder="Type name here..." />
                            <label for="name">Name</label>
                        </div>

                        <div class="input-field col s12">
                            <textarea  type="text" class="validate materialize-textarea" placeholder="Type description here..."></textarea>
                            <label for="description">Description</label>
                        </div>


                        <div class="input-field col s12">
                            <input  type="text" class="validate" id="form-price" placeholder="Type price here..." />
                            <label for="price">Price</label>
                        </div>


                        <div class="input-field col s12">
                            <a id="btn-create-product" class=" btn margin-bottom-1em"  ng-click="createProduct()"><i class="material-icons left">add</i>Create</a>

                            <a id="btn-update-product" class=" btn margin-bottom-1em" ><i class="material-icons left">edit</i>Save Changes</a>

                            <a class="modal-action modal-close  btn margin-bottom-1em"><i class="material-icons left">close</i>Close</a>
                        </div>
                    </div>
                </div>
            </form>
            <!-- floating button for creating product -->
            <div class="fixed-action-btn" style="bottom:45px; right:24px;">
                <a class=" btn btn-floating btn-large red modal-open" href="#modal-product-form" ng-click="showCreateForm()"><i class="large material-icons">add</i></a
            </div>
        </div>
    </div>

</div>

my angular script code is as follows:

      var app = angular.module("myCrudModule", []).controller("myCrudController", function ($scope, $http, $log) {
    $scope.showCreateForm = function () {

        $scope.id = "";
        $scope.name = "";
        $scope.description = "";
        $scope.price = "";
        $scope.user = {};
        $('#modal-product-title').text("Create product form");
        $('#btn-update-product').hide();
        $('#btn-create-product').show();

        $scope.createProduct = function(){

            // fields in key-value pairs
            $http.post('create_product.php', {
                    'name' : $scope.name,
                    'description' : $scope.description,
                    'price' : $scope.price
                }
            ).success(function (data, status, headers, config) {
                console.log(data);
                // tell the user new product was created
                Materialize.toast(data, 4000);

                // close modal
                $('#modal-product-form').closeModal();

                // clear modal content
                $scope.id = "";
                $scope.name = "";
                $scope.description = "";
                $scope.price = "";

                // refresh the list
               // $scope.getAll();
            });
        }
    }
});

my create_product php file is

     <?php
include_once 'config/database_connection.php';
$database = new Database();
$db = $database->get_connection();
include_once 'objects/product.php';
$product = new Product($db);
// get posted data
$data = json_decode(file_get_contents("php://input"));
error_log($data->name);
// set product property values
$product->name = $data->name;
$product->price = $data->price;
$product->description = $data->description;
$product->created = date('Y-m-d H:i:s');

if($product->create()){
    echo "Product was created.";
}

// if unable to create the product, tell the user
else{
    echo "Unable to create product.";
}

?>

iam getting null value when i submit the form and want to print the data as follows

$data = json_decode(file_get_contents("php://input"));
error_log($data->name);

can spmeone help me..iam new to angular

Answer 1

Full file URL must be used for ajax/get and post requests. change httppathtoyourscript/create_product.php in below lines.

$http.post('create_product.php', {
                    'name' : $scope.name,
                    'description' : $scope.description,
                    'price' : $scope.price
                }