Updating AngularJS scope after validating search form in Symfony2
@Kodvin was right, i've come up with the following solution :
First of all, my S2 Controller :
/** * @Route("/tiers", name="index") */public function indexAction(){ return $this->render('tiers/list.html.twig', [ 'generatedScope' => 'searchTiers', ]);}
The generatedScope searchTiers
define another function in my controller that fetch the datas :
/** * @Route("/tiers/list/json/search", name="searchTiers") */public function searchTiersAction(Request $request){ // TODO: A bit of refactoring needed there :-) $prenom = array('first_name' => $request->request->get('first_name')); $nom = array('last_name' => $request->request->get('last_name')); $params['first_name'] = $prenom['first_name']; $params['last_name'] = $nom['last_name']; $tiers = new Tiers($this->get('database_connection')); $response = new JsonResponse($tiers->searchTiers($params)); return $response;}
My form (Got rid of Symfony 2 forms... but I assume I can do that with S2 form aswell) :
<form method="post" ng-submit="submit()" id="search_tiers"> <input ng-model="last_name" type="text" placeholder="Nom" name="last_name"> <input ng-model="first_name" type="text" placeholder="Prénom" name="first_name"> <input ng-model="submit" type="submit" value="Rechercher" name="submit_form"></form>
Binding my inputs to the scope with ng-model
Calling the submit()
scope function when clicking the submit button in my
app.controller('tiersCtrl', function ($scope, $http){ $scope.submit = function() { var req = { method: 'POST', url: '{{ url(generatedScope)}}', headers: { 'Content-Type': 'application/json' }, data: { last_name: $scope.last_name, first_name: $scope.first_name } } $scope.loading = true; $http(req).then(function(response){ $scope.tiers = response.data; },function(response){ // TODO: handle the error somehow }); }});
{{ url(generatedScope }}
is a Twig var calling my searchTiersAction() in my S2 controller to return data.
Finally, display data :
<tr ng-repeat="x in tiers"> <td>#{{ x.tie_id }}</td> <td>{{ x.tie_nom }}</td> <td>{{ x.tie_prenom }}</td> <td>{{ x.tie_adresse }}</td> <td>{{ x.tie_cp }}</td> <td>{{ x.com_nom }}</td> <td class="visible-none">{{ x.tpt_nom }}</td></tr>
All I was missing was that I was losing my POST params when I was submitting my form, the Ajax request was totally lost... which is basically Angular's logic.
If you guys have any other solution, please tell us!
For the moment I hope it helps! :)
Dylan