具有嵌套属性的ng-table过滤器

时间:2014-11-04 08:27:09

标签: angularjs ngtable

我有以下JSON:

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

我创建了ng-table来显示它。我试着添加过滤器。当我按ID过滤时,一切都按预期工作(过滤器为{ "Id": "2" })。但我无法创建适当的过滤器Str1Str2字段。我已经尝试过了:

  1. { "Str1": "A" }
  2. { "Data.Str1": "A" }
  3. { "Data['Str1']": "A" }
  4. 但上述选项不起作用。

    我的工作示例如下:http://plnkr.co/edit/MyJCqTlgvKLtSP63FYQY?p=preview

    更新

    感谢@Blackhole我创建了过滤器{Data: {Str1: 'A'}}。但我只能在代码中进行delcare。当我尝试在HTML中添加这样的内容时,它甚至不会显示过滤器:

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

1 个答案:

答案 0 :(得分:2)

当您尝试在html中使用filter="{Data:{Str1: 'text'}}"时,输入不会在标题中显示模板原因,请查看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>

就在这里<div ng-repeat="(name, filter) in column.filter">它没有深入挖掘嵌套对象

Ngtable不支持默认模板中的嵌套过滤器,因此您可以创建自己的模板,以支持它。看看example of header template

注意

这是column.filter初始化的方式,它是从filter标记上的td属性进行解析,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,