3

I do choose two fields (month and origin) in a form and submit it to an AngularJS controller, i am using 1.3.13 version packaged with Ionic framework.

Watching a console.log inside then method the values are populated correctly.

The q.promisse wich is returned have this value: [object, object].

The list of the HTML template is not populated with the rigth expected values.

The values does not populate the PHP POST variable in the PHP API.

How can i populate the POST data ???

In my template i do submit to search method :

 <form method="post" ng-controller="AcpSearchCtrl" ng-submit="search(data)">
    <select name="month" ng-model="data.month">
      <option value="01">January</option>

And in my controller o do use http.post and a promisse:

.controller('AcpSearchCtrl', function($scope, ApiAcpSearch, $ionicLoading, $timeout, $http, ApiAcpEndpoint, $q) {  
  $scope.search = function(data) {
    $ionicLoading.show({
      noBackdrop: false,
      template: '<p>searching ...</p>'
    });
    var q = $q.defer();
    $scope.formData = {};
    $scope.submission = false;
    var param = function(data) {
          var returnString = '';
          for (d in data){
              if (data.hasOwnProperty(d))
                 returnString += d + '=' + data[d] + '&';
          }
          return returnString.slice( 0, returnString.length - 1 );
    };
    console.log('formData : '+$scope.formData);
    return $http({
      url:ApiAcpEndpoint.url,
      data : param($scope.formData),
      method : 'POST',
      headers : {'Content-Type':'application/x-www-form-urlencoded; charset=UTF-8'}
    }) 
    .then(function(data) {      
          q.resolve(data);          
          var acp = {};
          acp.qdata = [ data ];
          $scope.data = acp.qdata;
          $ionicLoading.hide();
          return q.promise;
      });
  }
})
Ângelo Rigo
  • 2,039
  • 9
  • 38
  • 69

1 Answers1

5

AngularJS, by default, sends data in the JSON format. You won't find it in the regular PHP globals ($_REQUEST, $_POST or $_GET).

You have two ways to solve this issue:

Set the default Content-Type globally for AngularJS (just setting the header before the request will not work).

var app = angular.module("app", []);
app.config(['$httpProvider', function($httpProvider) {
    $httpProvider.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded";
    $httpProvider.defaults.headers.common["X-Requested-With"] = "XMLHttpRequest";
}]);

The alternative is that you handle the way AngularJS sends the data in PHP:

$angularJSData = json_decode(file_get_contents("php://input"));

// json_decode will create an object so if you need in array format
$angularJSData = (array)$angularJSData;

With this knowledge you can create a function or even your own global.

Falk Thiele
  • 4,424
  • 2
  • 17
  • 44
Ricardo Velhote
  • 4,630
  • 1
  • 24
  • 30
  • Thank´s Ricardo i tried but does not work, this must be a minor detail. Is there any kind of debugging i can do? i am printing and see `null` on the server side `PHP` script. I also tried to separate into a service and there the month and origin appear populated but still not into the `PHP API`. – Ângelo Rigo Jul 16 '15 at 17:56
  • I just get err_content_encoding – Ângelo Rigo Jul 20 '15 at 14:44
  • 1
    @ÂngeloRigo Post your whole form. – Ricardo Velhote Jul 20 '15 at 16:16
  • I pass the whole form, as you point and work´s ! thank you very much. My problem now is that at the `console log` i see the **correct data** filtered by month and origin coming from the webservice, but the template **does not update** to show this data and shows the unfiltered data instead . I have the `$scope.data` with the real data on the `console.log`, how do i force an update or return the correct data ? – Ângelo Rigo Jul 20 '15 at 18:32
  • 1
    @ÂngeloRigo Without knowing your full requirements (or the ionic framework) here's my suggestion. I think you are complicating matters by using promises in this situation `$http({ /* code */ ).success(function(data) { /* More stuff */ });`. Do you understant what I mean? – Ricardo Velhote Jul 21 '15 at 01:16
  • Yes ! i am new to angularjs, but i will try to use http.post instead of a promisse, and see what the success section returns. – Ângelo Rigo Jul 21 '15 at 11:57
  • Using http post just work´s! i see the correct data at console.log, now i will track a ng-repeat duplicate, try to use track by $index but iterate over each character. – Ângelo Rigo Jul 21 '15 at 14:20