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.

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.