6

I'm using AngularJS, ng-table and coffeescript together and would like to create a multiple template filter within coffeescript and pass it into my angularjs template.

I have a name & surname combined column which I would like two filters for 'name' and 'surname'.

So far I have it working like so;

      <td data-title="'Customer'" sortable="'fullname'"
        filter="{'name_cont': 'text', 'surname_cont':'text'}" >

But I would like to define this filter in my AngularJS controller like so

   $scope.nameFilterDef = {
     name: {
       id: "text",
       placeholder: "Name"
     },
     surname: {
       id: "text",
       placeholder: "Surname"
     }
   }

And clean up my template by using that filter like so;

      <td data-title="'Customer'" sortable="'fullname'"
        filter="nameFilterDef" >

When I call the filter like this though no filter boxes appear.

Update

If I put {{nameFilterDef}} on the page I can see my filter hash getting passed in.

map7
  • 5,096
  • 6
  • 65
  • 128
  • At first glance it looks like the **filter** attribute is not parsed as an angular expression. Did you try it as `filter="{{nameFilterDef}}"`? – mz3 Nov 16 '15 at 19:02
  • Yes I did try that, I get the error; Error: [$parse:syntax] Syntax Error: Token 'nameFilterDef' is unexpected, expecting [:] at column 3 of the expression [{{nameFilterDef}}] starting at [nameFilterDef}}]. – map7 Nov 17 '15 at 03:33
  • You could test your code by ng-repeating `nameFilterDef` in your template. If it turns up empty, means that the template `$scope` is not as you expect it to be. Could you create a plunker or jsFiddle? – Vijay Dev Nov 18 '15 at 13:30
  • If I use nameFilterDef in a ng-repeat I get my filter printed on the screen. – map7 Nov 19 '15 at 00:24

1 Answers1

4

If this html markup works for you...

<td data-title="'Customer'" sortable="'fullname'"
    filter="{'name_cont': 'text', 'surname_cont':'text'}" >

Then this code should work as well:

 //use this
 $scope.nameFilterDef = {
     'name_cont': 'text', 
     'surname_cont':'text'
  }
 //instead of this:
 $scope.nameFilterDef = {
 name: {
   id: "text",
   placeholder: "Name"
 },
 surname: {
   id: "text",
   placeholder: "Surname"
 }
}

-

 <td data-title="'Customer'" sortable="'fullname'"
 filter="nameFilterDef" >

Here is a working example in codepen: Passing filter from the controller as an object

Also if you provide working code in plunker, codepen or jsFiddle, it would be super helpful.

Hope this helps you.

JoMendez
  • 880
  • 9
  • 22
  • I tried what you suggested there and it didn't work. It must be something deep within my setup I think. Maybe the rails asset pipeline is getting in the way, or coffeescript, or the version of AngularJS I'm using – map7 Nov 19 '15 at 00:26
  • I've figured out that I'm running a version of ng-table which doesn't allow this functionality. So I'm in the middle of upgrading that. – map7 Nov 23 '15 at 23:57
  • I've now got passed a few bugs and upgraded to 0.5.5 of ng-table and your answer works nicely, thank you. – map7 Nov 26 '15 at 03:31