Angular - trouble using multiple filters on ng-repeat that has nested objects

Question

Revised Question

I have an ng-repeat and I am trying to filter on a nested attribute. For example, how do you filter on job:title, which is nested, in the below set:

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

I made a solution in this JsFiddle

Original Question

I have an ng-repeat that uses nested values in each iteration.

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

I want multiple filters to act independently on each of those values. I can't seem to figure out the syntax:

    <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>

EDIT: Sample of the json object

{     "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"
           }
        ]
     }
  ]

}

on what Values Multiple filter should act independent .. Can you please update your Aim of this post and sample object(optional). it seems bit unclear i have an idea about what you are asking but no sure 100% — Prasad, Mar 02 '16 at 04:49

score 0 · Answer 1 · answered Mar 02 '16 at 04:51

0

Have you tried something like below,

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


<tr>
    <td><input type="text" placeholder="Filter by User name" ng-model="search.name"/></td>
    <td><input type="text" placeholder="Filter by Item name" ng-model="search.itemName"/></td>
</tr>

answered Mar 02 '16 at 04:51

Santhosh

8,181
4
29
56

Can you post your sample object for `items` array ? – Santhosh Mar 02 '16 at 04:58
San Krish, please see edited post for sample json object. Thank you – brietsparks Mar 03 '16 at 00:19

score 0 · Accepted Answer · edited May 23 '17 at 11:45

I worked out a solution in JsFiddle with help of this thread.

Breaking it down for dummies such as myself:

Each filter input element has its own ng-model value:

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

When applying the filter to the ng-repeat, the json of ther iteration object is the key (goes before :), and the ng-model term (defined above) is the value (goes after :):

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

Applied:

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

Angular - trouble using multiple filters on ng-repeat that has nested objects

Revised Question

I made a solution in this JsFiddle

Original Question

2 Answers2