samedi 2 juillet 2016

cannot POST json data using Angular

I am finished my first online calculator and cannot understand how to send the data to server. I am using Laravel 5 + angularjs

in my blade.php I have this

    {!! Form::open(array( 'class' => 'calculator', 'name' => 'calculator', 'files' => true, 'ng-app' => 'SaunaDoorCalc', 'ng-controller' => 'SaunaDoorCalcController')) !!}
@if(Session::has('message'))
    <div class="alert alert-info"></div>
@endif
@if(Session::has('errors'))
    <div class="alert alert-info">@foreach($errors->all() as $error)<br>@endforeach
</div>
@endif

    <input name="calc" ng-model="calc" type="text" value="saunadoor" disabled>

<div class="row">
    <div class="col-xs-12 col-sm-6">Размер дверной коробки
        <div class='input' ng-repeat="a in sizeswitch">
            <input type="radio" name='radio' ng-model="$parent.selectedSizeSwitch" ng-value="a.label" id="@">
            <label for="@">@</label>
        </div>
    </div>

   <div ng-switch on="selectedSizeSwitch">
    <div class="col-xs-12 col-sm-6" ng-switch-when="Стандартный">Стандартные размеры дверной коробки (мм)
        <div class="custom-dropdown custom-dropdown--white">
            <select ng-model="$parent.selectedStandardSize" ng-options="b.label for b in standardsizes" class="standard_sizes custom-dropdown__select custom-dropdown__select--white"></select>
        </div>
    </div>

    <div class="col-xs-12 col-sm-6" ng-switch-when="Ввести размер">Нестандартные размеры дверной коробки
        <div class='input'>
            <input name="door_size_b" id="input1" type="text" ng-model="$parent.DoorSizeB" ng-pattern="/^[0-9]{1,4}$/" placeholder=""><label for="door_size_b">Ширина дверной коробки, мм</label>
            <span ng-show="calculator.door_size_b.$error.pattern">Введите число от 0 до 9999мм</span>
        </div>

        <div class='input'>
            <input name="door_size_h" id="door_size_h" type="text" ng-model="$parent.DoorSizeH" ng-pattern="pattern"><label for="door_size_h">Высота дверной коробки, мм</label>
            <span ng-show="calculator.door_size_b.$error.pattern">Введите число от 0 до 9999мм</span>
        </div>
    </div>
   </div>


</div>

<div class="row">
    <div class="col-xs-12 col-sm-6"><span class="col-xs-6 col-sm-3">Стекло</span>
        <div class="custom-dropdown custom-dropdown--white">
            <select ng-model="selectedGlass" name="glass" ng-options="c.label for c in glass" class="custom-dropdown__select custom-dropdown__select--white"></select>
        </div>
    </div>

    <div class="col-xs-12 col-sm-6"><span class="col-xs-6 col-sm-3">Материал коробки</span>
        <div class="custom-dropdown custom-dropdown--white">
            <select ng-model="selectedKorobka" name="korobka" ng-options="d.label for d in korobka" class="custom-dropdown__select custom-dropdown__select--white"></select>
        </div>
    </div>
</div>


<div class="row">
    <div class="col-xs-12 col-sm-6"><span class="col-xs-6 col-sm-3">Петли</span>
        <div class="custom-dropdown custom-dropdown--white">
            <select ng-model="selectedPetli" ng-options="e.label for e in petli" class="custom-dropdown__select custom-dropdown__select--white"></select>
        </div>
    </div>

    <div class="col-xs-12 col-sm-6"><span class="col-xs-6 col-sm-3">Декор</span>
        <div class="custom-dropdown custom-dropdown--white">
            <select ng-model="selectedDekor" ng-options="f.label for f in dekor" class="custom-dropdown__select custom-dropdown__select--white"></select>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-xs-12 col-sm-6"><span class="col-xs-6 col-sm-3">Доставка</span>
        <div class="custom-dropdown custom-dropdown--white">
            <select ng-model="selectedDostavka" ng-options="g.label for g in dostavka" class="custom-dropdown__select custom-dropdown__select--white"></select>
        </div>
    </div>

    <div class='input col-xs-12 col-sm-6'>
        <input type='checkbox' id='montazh' ng-model="montazh" ng-true-value="1500" ng-false-value="0"/>
        <label for="montazh">Монтаж</label>
    </div>
</div>


<table class="result table table-hover table-striped table-bordered table-condensed" ng-switch on="selectedSizeSwitch"> 
    <caption>Итоговая спецификация</caption>
<tbody>
<tr><td>Опция</td>                          <td>Значение</td>                                               <td>Цена, руб</td></tr>
<tr><td>Размер дверной коробки (мм):</td>   
    <td ng-switch-default>@, @</td>
    <td ng-switch-when="Нестандартный">@, @x@</td>  
    <td ng-switch-default>@</td>
    <td ng-switch-when="Нестандартный">@</td>
</tr>

<tr><td>Стекло</td>                         <td>@</td>                               <td>@</td></tr>
<tr><td>Материал дверной коробки:</td>      <td>@</td>                             <td>@</td></tr>
<tr><td>Петли:</td>                         <td>@</td>                               <td>@</td></tr>
<tr><td>Декор:</td>                         <td>@</td>                               <td>@</td></tr>
<tr><td>Доставка:</td>                      <td>@</td>                            <td>@</td></tr>
<tr><td>Монтаж:</td>                        <td>@</td>                                     <td>@</td></tr>

<tr><td>Стоимость двери:</td>               <td></td>
  <td ng-switch-default>@</td>
  <td ng-switch-when="Нестандартный">@</td>
</tr>
</tbody>
</table>


<div class="col-sm-6">
    <div class="input">
        <input id="name" name="name" ng-model="name" type="text" required>
        <label for="name">Ваше имя *</label>
    </div>
    <div class="input">
        <input id="phone" name="tel" ng-model="tel" type="text"  required>
        <label for="phone">Номер телефона *</label>
    </div>
    <div class="input">
        <input id="email" name="email" ng-model="email" type="email"  required>
        <label for="email">Адрес электронной почты *</label>
    </div>
</div>

<div class="col-sm-6">
    <div class="input">
        <textarea id="message" name="message" ng-model="message"></textarea>
        <label for="message">Комментарии</label>
    </div>
</div>


<div class="footer col-xs-12 col-sm-6">
    <button type="submit" class="btn btn-primary pull-right" ng-click="submit(calculator.$valid)">Отправить заказ</button>
</div>

{!! Form::close() !!}

in my js script

angular
  .module('SaunaDoorCalc',[])
  .controller('SaunaDoorCalcController', function($scope, $http) {

    $scope.outerScope = {};
    $scope.data = {};

    $scope.sizeswitch = [           
      { label: 'Стандартный', value: 'standard'},
      { label: 'Ввести размер', value: 'special'}
    ];
    $scope.selectedSizeSwitch = 'Стандартный'; // Default is Стандартный

    $scope.standardsizes = [           
      { label: '585х1880', price:5600 },
      { label: '685x1880', price:3600 },
      { label: '685x1980', price:5600 },
      { label: '685x2080', price:5600 },
      { label: '685x2180', price:6600 },
      { label: '785x1880', price:5600 },
      { label: '785x1980', price:5600 },
      { label: '785x2080', price:5600 },
      { label: '785x2180', price:6600 }
    ];
    $scope.selectedStandardSize = $scope.standardsizes[1];  
    // Default is 685x1880 - second array element. First element index is 0.

    $scope.glass = [           
      { label: 'Прозрачное (стандарт)', price:0 },
      { label: 'Матовое (Matelux)', price:1000 },
      { label: 'Бронза (Bronze)', price:1500 },
      { label: 'Матовая Бронза (Matelux Bronze)', price:2000 },
      { label: 'Черное', price:4000 }
    ];
    $scope.selectedGlass = $scope.glass[0]; 

    $scope.korobka = [           
      { label: 'Липа (стандарт)', price:1000 },
      { label: 'Лиственница', price:2000 },
      { label: 'Бук', price:3000 },
      { label: 'Дуб', price:6000 }
    ];
    $scope.selectedKorobka = $scope.korobka[0]; 

    $scope.petli = [           
      { label: 'Хром (стандарт)', price:900 },
      { label: 'Бронза', price:1900 },
      { label: 'Золото', price:2000 }
    ];
    $scope.selectedPetli = $scope.petli[0]; 

    $scope.dekor = [           
      { label: 'Нет', price:0 },
      { label: 'Пескоструйный рисунок', price:1000 },
      { label: 'Лазерная гравировка', price:1500 },
      { label: 'Фотопечать', price:2000 },
      { label: 'Пескоструйный рисунок с фьюзингом', price:3000 }
    ];
    $scope.selectedDekor = $scope.dekor[0]; 

    $scope.dostavka = [           
      { label: 'Нет', price:0 },
      { label: 'в пределах МКАД', price:1500 },
      { label: 'за МКАД', price:1500 }
    ];
    $scope.selectedDostavka = $scope.dostavka[0]; 
    $scope.montazh = 0;

    $scope.url = 'http://ift.tt/299lAev';

    $scope.submit = function(isValid) {
      if (isValid) {
          $http.post($scope.url, {"name": $scope.name, "email": $scope.email, "message": $scope.message, "dostavka1": $scope.dostavka, "dostavka2": $scope.selectedDostavka }).
                        success(function(data, status) {
                            console.log(data);
                            $scope.status = status;
                            $scope.data = data;
                            $scope.result = data; 
                        })
            }else{

                  alert('Form is not valid');
            }

        }

  });

in my routes.php

Route::get('izdeliya-iz-stekla/{cat}/{item}', 'StekloController@getItem');
Route::post('izdeliya-iz-stekla/{cat}/{item}', ['as' => 'order', 'uses' => 'StekloController@order']);

in my StekloController

public function order(CalculatorRequest $request) 
{
    $input = Input::json();
    return Redirect::back()->with( dd($input) );      
}

Then after click on submit button I have

ParameterBag {#211 ▼
  #parameters: []
}

So for me it seems that I'm trying to send empty object. But I cannot understand how to tune Angular script



via Chebli Mohamed

Aucun commentaire:

Enregistrer un commentaire