Angular - 在具有嵌套对象的ng-repeat上使用多个过滤器时出现问题

时间:2016-03-02 04:37:50

标签: angularjs

修订问题

我有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"
           }
        ]
     }
  ]

}

2 个答案:

答案 0 :(得分:0)

您是否尝试过以下内容,

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

答案 1 :(得分:0)

我在JsFiddle的帮助下在this thread中制定了一个解决方案。

为像我这样的假人打破它:

每个过滤器输入元素都有自己的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项(在上面定义)是值(在{{之后) 1}}):

:

申请:

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