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

标签 angularjs ngtable

我有以下 JSON:

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

我创建了 ng-table 来显示它。我试图添加过滤器。当我按 Id 过滤时,一切都按预期工作(过滤器是 { "Id": "2" } )。但我无法创建适当的过滤器 do Str1Str2领域。我已经尝试过:
  • { "Str1": "A" }
  • { "Data.Str1": "A" }
  • { "Data['Str1']": "A" }

  • 但以上选项不起作用。

    我的工作示例在这里:http://plnkr.co/edit/MyJCqTlgvKLtSP63FYQY?p=preview

    更新

    感谢@Blackhole 我创建了这个过滤器 {Data: {Str1: 'A'}}作品。但我只能在代码中对此进行说明。当我尝试在 HTML 中放置类似的内容时,它甚至不显示过滤器:
      <td data-title="'Str1'" filter="{Data:{Str1: 'text'}}">
        {{ user.Data.Str1 }}
      </td>
    

    最佳答案

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

    关于angularjs - 具有嵌套属性的 ng-table 过滤器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26730608/

    相关文章:

    javascript - 如何在模板中加载和访问 Google 地方信息库?

    javascript - 组件的 Angular 2 指令覆盖 ng-content?

    angular - Angular 2 的数据网格

    javascript - AngularJS 中的场景测试

    javascript - 如何使用 AngularJS scope.$watch() 方法观察 JQuery 选择器

    javascript - 使用 ui-router 时如何去掉/#/?

    javascript - 无法将数组加载到 ngTable

    javascript - ng 表类型错误 : Cannot set property '$data' of null

    javascript - 使用嵌套 json 时,排序在 ngTable 中不起作用