Ng-table filter with nested properties

Question

I have a JSON:

[{ "Id": "1", "Data": {"Str1": "Ann", "Str2": "Xenna"} },{ "Id": "2", "Data": {"Str1": "Bob","Str2": "Bobby"}, }] 

And I created an ng table to display it. I tried to add a filter. When I filter by Id, everything works as expected (filter { "Id": "2" } ). But I can not create the correct filter do Str1 and Str2 . I already tried:

• { "Str1": "A" }
• { "Data.Str1": "A" }
• { "Data['Str1']": "A" }

but above the parameters does not work.

An example of my work here: http://plnkr.co/edit/MyJCqTlgvKLtSP63FYQY?p=preview

Update

Thanks to @Blackhole, I founded this filter {Data: {Str1: 'A'}} . But I can only take care of this in code. When I try to add something like this to HTML, it doesn't even display a filter:

  <td data-title="'Str1'" filter="{Data:{Str1: 'text'}}"> {{ user.Data.Str1 }} </td> 

Answer 1

When you try to use filter="{Data:{Str1: 'text'}}" in html, the input does not show the reason for the template in the header, see the source code .

 <div ng-repeat="(name, filter) in column.filter"> //!!!! right here it not supported <div ng-if="column.filterTemplateURL" ng-show="column.filterTemplateURL"> <div ng-include="column.filterTemplateURL"></div> </div> <div ng-if="!column.filterTemplateURL" ng-show="!column.filterTemplateURL"> <div ng-include="'ng-table/filters/' + filter + '.html'"></div> </div> </div> 

right here <div ng-repeat="(name, filter) in column.filter"> it doesn't break into nested objects

Ngtable does not support the nested filter in the default template, so you can create your own template that will support it. Take a look at an example header template .

Note

This is how column.filter initialized, it parses the filter attribute on the td tag, source

 var parsedAttribute = function (attr, defaultValue) { return function (scope) { return $parse(el.attr('x-data-' + attr) || el.attr('data-' + attr) || el.attr(attr)) (scope, { $columns: columns }) || defaultValue; }; }; var parsedTitle = parsedAttribute('title', ' '), headerTemplateURL = parsedAttribute('header', false), // here filter = parsedAttribute('filter', false)(), filterTemplateURL = false, filterName = false; ... columns.push({ .... filter: filter,