Angular-在具有嵌套对象的ng-repeat上使用多个过滤器的麻烦

萨帕卡

修订的问题

我有一个ng-repeat,我正在尝试对嵌套属性进行过滤。例如,如何job:title在以下集合中对嵌套的进行过滤

{
    "name":"Bob", 
    "job": {
        "title":"farmer",
        "difficulty":"medium"
    }
},
{
    "name":"Sue", 
    "job": {
        "title":"fisher",
        "difficulty":"hard"
    }
},
{
    "name":"Joe", 
    "job":{
        "title":"smith",
        "difficulty":"expert"
    }
}

我在此JsFiddle中提出了解决方案


原始问题

我有一个ng-repeat在每次迭代中使用嵌套值的。

    <tr ng-repeat="item in items | filter:myFilter ">
        <td>{{ item.user.name }}</td>
        <td>{{ item.item_name.value }}</td>
    </tr>

我希望多个过滤器对这些值中的每一个都独立起作用。我似乎无法弄清楚语法:

    <tr>
        <td><input type="text" placeholder="Filter by User name" ng-model="myFilter.item.user.name"/></td>
        <td><input type="text" placeholder="Filter by Item name" ng-model="myFilter.item.item_name.value"/></td>
    </tr>

编辑:json对象的示例

{     "items":[  
     {  
        "item_id":{  
           "name":"item_id",
           "inputType":null,
           "alias":"item id",
           "required":null,
           "locked":true,
           "viewable":null,
           "groupNames":[],
           "priority":null,
           "validationRules":null,
           "value":4,
           "valueSet":null,
           "in":null
        },
        "user_id":{  
           "name":"user_id",
           "inputType":null,
           "alias":"user id",
           "required":null,
           "locked":true,
           "viewable":null,
           "groupNames":[],
           "priority":null,
           "validationRules":[  
              "in:"
           ],
           "value":2,
           "valueSet":null,
           "in":null
        },
        "item_name":{  
           "name":"item_name",
           "inputType":"String",
           "alias":"name",
           "required":true,
           "locked":null,
           "viewable":true,
           "groupNames":[],
           "priority":null,
           "validationRules":[  
              "string",
              "required"
           ],
           "value":"swd1",
           "valueSet":null,
           "in":null
        },
        "item_type":{  
           "name":"item_type",
           "inputType":null,
           "alias":"item type",
           "required":null,
           "locked":true,
           "viewable":null,
           "groupNames":[],
           "priority":null,
           "validationRules":null,
           "value":"sword",
           "valueSet":null,
           "in":null
        },
        "item_category":{  
           "name":"item_category",
           "inputType":null,
           "alias":"item category",
           "required":null,
           "locked":true,
           "viewable":true,
           "groupNames":[  
              "profile",
              "category"
           ],
           "priority":null,
           "validationRules":null,
           "value":"weapon",
           "valueSet":{  
              "values":[  
                 "weapon",
                 "protection"
              ],
              "selectLimit":1
           },
           "in":"weapon,protection,"
        },
        "item_weight":{  
           "step":null,
           "isInteger":null,
           "unitName":"lbs",
           "name":"item_weight",
           "inputType":"number",
           "alias":"weight",
           "required":true,
           "locked":null,
           "viewable":true,
           "groupNames":[  
              "profile"
           ],
           "priority":null,
           "validationRules":[  
              "numeric",
              "min:0",
              "max:99",
              "required"
           ],
           "value":1,
           "valueSet":null,
           "in":null
        },
        "user":{  
           "id":2,
           "name":"asdf",
           "email":"",
           "created_at":"2016-01-01 04:49:49",
           "updated_at":"2016-02-24 03:48:21"
        },
        "images":[],
        "reviews":[  
           {  
              "rev_id":5,
              "reviewable_type":"App\\Models\\ItemTaxonomy\\Item",
              "reviewable_id":4,
              "created_at":"2016-02-29 00:51:42",
              "updated_at":"2016-02-29 00:51:42"
           }
        ]
     }
  ]

}

萨帕卡

借助此线程JsFiddle中制定了一个解决方案

分解为像我这样的假人:

每个过滤器输入元素都有其自己的ng-model值:

<tr>
    <td><input ng-model="nameSearch" type="text" placeholder="filter"/></td>
    <td><input ng-model="jobSearch" type="text" placeholder="filter"/></td>
</tr>

将过滤器应用于ng-repeat时,迭代对象的json是键(在之前:),而ng-model项(在上面定义)是值(在之后:):

filter:{json.nested.item:nameSearch, different.nested.item:jobSearch}

应用:

<tr ng-repeat="item in items | filter:{name:nameSearch,job.title:jobSearch}">
    <td>{{item.name}}</td>
    <td>{{item.job.title}}</td>
</tr> 

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

ng-Repeat(> 5)上的Angular Simple过滤器

Angular 8 对象数组上的多个过滤器

Angular.js ng-repeat过滤器,具有多个值之一(值或)的属性

Angular.js嵌套ng-repeat带有在过滤器中使用的表达式

Angular.js中具有ng-bind-html的多个过滤器

带有嵌套对象Angular 5的过滤器数组

Angular 1.4:如何使用过滤器强制更新 ng-repeat 中的指令?

使用 2 参数过滤器(Angular)从对象中删除多个对象

对象数组上的Angular RxJS可观察过滤器

在对象的对象上使用多个键值过滤器?

使用“多个过滤器”的Angular JS

如何在 ng-repeat Angular JS 中使用或条件添加两个过滤器

具有嵌套属性的ng表过滤器

带有嵌套对象的Angular Material 2 DataSource过滤器

如何在 Angular 中对嵌套的 JSON 对象使用搜索过滤器?

如何使用Angular中的过滤器访问嵌套的对象元素数组?

AngularJS ng-repeat过滤器属性具有多个变量?

如何使用带有ng-repeat的过滤器基于字段值过滤和对象

Ng-Repeat中的Angular JS Date格式过滤器未格式化

具有数组属性的Angular 2 Search Pipe过滤器对象

Angular的orderBy过滤器和仅具有方法的对象数组

Angular/Typescript 中的对象过滤器

ng-repeat:如何添加多个过滤器?

交叉过滤器使用具有嵌套对象的数据创建维

使用多个过滤器 Angular Material 表

具有混合嵌套/非嵌套过滤器的嵌套对象聚合项

Angular 5-多个管道过滤器在对象数组中不起作用

如何在Angular 1.3.6上创建自定义过滤器以搜索嵌套数组?

共享点:具有和条件的多个优化过滤器(将REST API用于Angular4)