ng-table filter with nested properties

Question

I have following JSON:

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

And I created ng-table to display it. I tried to add filter. When I filter by Id everything works as expected (filter is { "Id": "2" }). But I cannot create proper filter do Str1 and Str2 fields. I already tried:

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

but above options does not work.

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

Update

Thanks to @Blackhole I founded that filter {Data: {Str1: 'A'}} works. But I can only delcare this in code. When I try to put something like this in HTML it doesn't even show filter:

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

Have you tried something like `{Data: {Str1: 'A'}}`? http://stackoverflow.com/questions/24266784/nested-filtering-with-angular-js-version-1-2-18 — Blackhole, Nov 04 '14 at 08:56
@Blackhole Your code works from script, but doesn't when it is in html. I will add update — Piotr Stapp, Nov 04 '14 at 09:03

score 2 · Accepted Answer · edited Jun 20 '20 at 09:12

When you try to use filter="{Data:{Str1: 'text'}}" in html,input doesn't showing cause of template in header,have a look in source code.

<div ng-repeat="(name, filter) in column.filter"> //!!!! right here it's 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's not dig into nested objects

Ngtable not support nested filter in default template,so you can create your own template,which gonna support it.Have a look to example of header template.

Note

This how column.filter is initializing,it's parsing from filter attribute on 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,

@Garath i am glad to help!!,besides this question is interesting to me too))) — Kostia Mololkin, Nov 05 '14 at 17:45
@KostiaMololkin can you update the broken link? "example of header template." — Chris Landeza, Feb 08 '17 at 09:31

ng-table filter with nested properties

1 Answers1

Note

Linked