AngularJS和PHP Undefined属性：stdClass

Question

I have a simple POST http request and is getting an error Undefined property: stdClass::$number and Undefined property: stdClass::$message. Here are my codes:

smsController.js

angular
    .module('smsApp')
    .controller('smsController', smsController)
    .config(config);

function config($routeProvider) {
    $routeProvider
    .when('/', {
        controller: 'smsController',
        templateUrl: 'app/views/messageForm.html'
    });
}

function smsController($scope, $http) {

    $scope.sendMessage = function() {
        $scope.loading = true;
        $scope.smsForm = {
            number: undefined,
            message: undefined
        };

        var data = {
            number: $scope.smsForm.number,
            message: $scope.smsForm.message
        };

        var req = {
            method: 'POST',
            url: 'app/endpoints/sendsms.php',
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded'
            },
            data: data
        };

        $http(req)
        .then(function successCallback(response) {
            console.log(response);
            $scope.loading = false;
          }, function errorCallback(response) {
            console.log(response);
          });
    }

}

messageForm.html

<div ng-hide="loading">
  <div class="input-field col s12">
    <input type="text" ng-model="smsForm.number" maxlength="11">
  </div>
  <div class="input-field col s12">
    <textarea ng-model="smsForm.message" maxlength="200"></textarea>
    <button ng-click="sendMessage()">Send</button>
  </div>
</div>

sendsms.php

$postdata = file_get_contents("php://input");
$request = json_decode($postdata);
echo json_encode($request);

Console

There is no data being passed and I'm getting the undefined property error. Am I missing something here?

Answer 1

You are setting undefined inside the sendMessage() function which will over-write any values user entered...so that's what will get sent.

Change declaration of the model object to be outside the function so that it will get inherited by child scopes:

FROM

$scope.sendMessage = function() {
    $scope.loading = true;
    $scope.smsForm = {
        number: undefined,
        message: undefined
    };
    ....
    // ajax code 
 }

TO

 $scope.smsForm = {};

 $scope.sendMessage = function() {
    $scope.loading = true;

    ....
    // ajax code
 }

ng-model will automatically add the properties to the $scope.smsForm object which is why it is declared as an empty object here.

Also since $scope.smsForm has the properties that you need in api, there is no need to transfer them to a new object data.

$http.post('app/endpoints/sendsms.php', $scope.smsForm ).then(...