Updating AngularJS scope after validating search form in Symfony2 Updating AngularJS scope after validating search form in Symfony2 symfony symfony

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