如何从项目列表中过滤项目集 - AngularJS

时间:2015-07-25 02:01:03

标签: angularjs

我在angularJS中有两个范围变量。一个存储"所有子类别"和其他存储"类别及其各自的子类别"。

$scope.Categories = [
{
    "subcategories": [
        {
            "scname": "Sugar",
            "scid": "5"
        },
        {
            "scname": "Salt",
            "scid": "6"
        },
        {
            "scname": "Jaggery",
            "scid": "7"
        }
    ],
    "name": "Salt and Sugar",
    "id": "1",
    "image": "/images/salt_sugar.png"
},
{
    "subcategories": [
        {
            "scname": "Tea",
            "scid": "8"
        },
        {
            "scname": "Coffee",
            "scid": "9"
        },
        {
            "scname": "Tea Bags",
            "scid": "162"
        }
    ],
    "name": "Tea and Coffee",
    "id": "2",
    "image": "/images/tea_and_coffee.png"
}
]

$scope.subcategories = [
{
    "name": "Sugar",
    "id": "5"
},
{
    "name": "Salt",
    "id": "6"
},
{
    "name": "Jaggery",
    "id": "7"
},
{
    "name": "Tea",
    "id": "8"
},
{
    "name": "Coffee",
    "id": "9"
},
{
    "name": "Tea Bags",
    "id": "162"
}
]

在选择类别时,我想显示具有该特定类别的已映射和未映射的子类别。第一个很容易。如何过滤第二个?例如 -

on selecting "Tea and Coffee" unmapped categories should be - Sugar, salt, Jaggery
on selecting "Salt and Sugar" unmapped categories should be - Tea, Coffee, Tea Bags

这就是我列出映射类别的方式:

<TR align="center">
    <TD>
        <select ng-options="c as c.name for c in Categories|orderBy:'name' " ng-model="selectedCategory" size="10"> </select>
    </TD>

    <TD>
        <select ng-options="sc as sc.scname for sc in selectedCategory.subcategories|orderBy:'scname' " ng-model="SelectedMappedSubCategory" size="10"> </select>
    </TD>


    <TD>
        <select ng-options="sc as sc.name for sc in SubCategories | orderBy:'name' | ???????" ng-model="SelectedUnMappedSubCategory" size="10"> </select>
    </TD>
</tr>

如果?????????

,我应该使用什么逻辑

2 个答案:

答案 0 :(得分:0)

如果我理解正确,为什么不过滤呢?

| filter: {scname: SelectedUnMappedSubCategory.scname}

编辑:

我可以看到您编辑了最初发布的代码。我认为你可以通过以下方式实现你想要做的事情:

| filter: {id: SelectedUnMappedSubCategory.scid}

答案 1 :(得分:0)

创建自定义过滤器:

sampleApp.filter('filterSubcategories', function() {
return function(input, filterkey) {
    var filtered = [];
    if (filterkey) {
        for (var i = 0; i < input.length; ++i) {
            var item = input[i];
            var found = false;
            for (var j = 0; j < filterkey.length; ++j) { 
                if (item.id == filterkey[j].scid) {
                    found = true;
                    break;
                }
            }
            if (!found){
                filtered.push(item);
            }
        }
    }
    return filtered;
};
});

并使用它:

<TD>
     <select ng-options="sc as sc.name for sc in SubCategories |  filterSubcategories:selectedCategory.subcategories | orderBy:'name'" ng-model="SelectedUnMappedSubCategory" size="10"> </select>
</TD>