ng-table multiple template filters using coffeescript

Question

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.

Autostability

At first glance it looks like the filter attribute is not parsed as an angular expression. Did you try it as filter="{{nameFilterDef}}"? – Paraplegia

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}}]. – Autostability

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? – Suter

If I use nameFilterDef in a ng-repeat I get my filter printed on the screen. – Autostability

Answer 1

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.

Extraordinary

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 – Autostability

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. – Autostability

I've now got passed a few bugs and upgraded to 0.5.5 of ng-table and your answer works nicely, thank you. – Autostability