1

In a application I'm working on I need to add some filters like for example: approved, with documents, with documents approved and some others. All these filters is based on MySQL queries to DB performed by PHP controller (I'm using Symfony2) and the functions on that controllers will return a well formed JSON. My question is: can I write filters for AngularJS based on this behavior? How? (I mean a little example just for understand the flow)

ReynierPM
  • 17,594
  • 53
  • 193
  • 363
  • If you display the data with angular you don't care where the data come from. `{{ obj.myData | myFilter}}` – Merlin Mar 24 '14 at 14:04
  • @Lorenzo I don't follow you, could you explain a bit more your answer? – ReynierPM Mar 24 '14 at 14:09
  • Ok so it might be me that didn't understood well your question. Do you know about angular filters already ? Angular filters are for formatting the value you display – Merlin Mar 24 '14 at 14:17
  • Ah no, I didn't realize that, what I want is more like [this ](http://angular.github.io/angular-phonecat/step-9/app/#/phones) where **Sort By** could be **Filter By** and then have the options I mention in my question, is that possible in Angular? – ReynierPM Mar 24 '14 at 14:20
  • Yes I guess you can do that. You need to create your own filter to achieve that. I can't help you more than that sorry Im also learning Angular. It is not very friendly at first but it is very powerfull. – Merlin Mar 24 '14 at 14:25
  • @Lorenzo thanks I'll wait for some others answer to see if I got more luck – ReynierPM Mar 24 '14 at 14:26

1 Answers1

1

I think you can do by something similar to below code:

//in your symfony controll
public function sampleAction() {
   $data = $this->getDoctrine()->getManager()->getRepository('YourBundle:SampleEntity')->findAll()->toArray();
   return $this->render('YourBundle:Views_Path:sampleTwigOutput.html.twig', array(
      'data' = json_encode($data)
   ));
}

In your twig file you can have something like

<div ng-init="mydata = {{ data|raw }}"></div>
<table id="sortedData">
  <tr><th>T1</th><th>T2</th></tr>
  <tr ng-repeat="data in mydata | filter:sortData">
     <td>{[{data.name}]}</td>
     <td>{[{data.phone}]}</td>
  </tr>

You also need to change the start and end symbol for to something different (like {[{ and }]}) interpolateProvider
Now you need to define a sortData js function like

angular.module('MySortModule', []).
  filter('sortData', function() {
    // do all your stuffs to sort the data base on whatever you want
    // set them all to out
    return out;
});

You can find more info about it on Angular filter

I would recommend to sort the data in DB through Symfony which is faster and in angular output just dump the data

Community
  • 1
  • 1
Javad
  • 4,339
  • 3
  • 21
  • 36
  • Your code has sense for me but I still confused since it's not just one filter, right now are four: "Without documents", "With documents for approving", "Active" and "Inactive", each call a different controller function at Symfony2 side, I didn't test your code but it will work for my requirements? The solution I'm working is use `ng-change` and then in Angular controller call the right function using `$.get` is ugly but is the only I found so fart – ReynierPM Mar 24 '14 at 16:27
  • You can apply multi filter base this link http://docs.angularjs.org/guide/filter but if I understand you want to call another ajax by each filter, right? If you have whole data then why should call ajax to apply filter? You can grab all data through Symfony controller and apply filter by Angular JS (or may I am not correct). Furthermore, I did not see any code from you so I just prepared a simple sample (I am not sure how should it work for your project) – Javad Mar 24 '14 at 16:32