How to pass parameter for filtering the result in AngularJS

Question

I have categories and subcategories linked to categories in scope varibales. Trying to create a table using this data.

<table>
    <tr ng-model = "SelectedCategory" ng-repeat="x in Categories | filter:{mapid: SelectedSuperCategory.id}:true">
        <td>{{ x.name }}</td>
        <br>
        <td>{{ x.id }}</td>



        <td>
        <table>
            <tr ng-repeat="y in SubCategories | filter:{mapid: {{ x.id }}  }:true">
                <td>{{ y.name }}</td>

            </tr>
        </table>
        </td>

    </tr>
</table>

I'm getting trouble in passing categoryid in subcategory filter.

Can someone please help me on this?

category data

[
    {
        "name": "Baby Food",
        "id": "200",
        "image": "/images/categories/baby-care.png",
        "mapid": "2"
    },
    {
        "name": "Baby Bath",
        "id": "201",
        "image": "/images/categories/baby-care.png",
        "mapid": "2"
    },
    {
        "name": "Baby diapers",
        "id": "202",
        "image": "/images/categories/baby-care.png",
        "mapid": "2"
    },

    {
        "name": "Dairy Products",
        "id": "503",
        "image": "/images/categories/baby-care.png",
        "mapid": "5"
    },
    {
        "name": "Others2",
        "id": "101",
        "image": "/images/categories/others.png",
        "mapid": "3"
    },
    {
        "name": " Bread",
        "id": "501",
        "image": "/images/categories/dairy-products.png",
        "mapid": "5"
    },
    {
        "name": "Beverages",
        "id": "103",
        "image": "/images/categories/beverages.png",
        "mapid": "23"
    },
    {
        "name": "Bakery",
        "id": "502",
        "image": "/images/categories/others.png",
        "mapid": "5"
    },
    {
        "name": "Others2",
        "id": "105",
        "image": "/images/categories/others.png",
        "mapid": "23"
    }
]

Subcategory Data

    [
    {
        "name": "Milk",
        "id": "5000",
        "image": "/images/categories/baby-care.png",
        "mapid": "503"
    },
    {
        "name": "Cheese",
        "id": "5001",
        "image": "/images/categories/baby-care.png",
        "mapid": "503"
    },
    {
        "name": "Paneer",
        "id": "5002",
        "image": "/images/categories/baby-care.png",
        "mapid": "503"
    },

    {
        "name": "Baby Care",
        "id": "100",
        "image": "/images/categories/baby-care.png",
        "mapid": "5"
    },
    {
        "name": "Others2",
        "id": "101",
        "image": "/images/categories/others.png",
        "mapid": "3"
    },
    {
        "name": " Bread, Bakery & Dairy Products",
        "id": "102",
        "image": "/images/categories/dairy-products.png",
        "mapid": "5"
    },
    {
        "name": "Beverages",
        "id": "103",
        "image": "/images/categories/beverages.png",
        "mapid": "23"
    },
    {
        "name": "Others",
        "id": "104",
        "image": "/images/categories/others.png",
        "mapid": "5"
    },
    {
        "name": "Others2",
        "id": "105",
        "image": "/images/categories/others.png",
        "mapid": "23"
    }
]

please post your category / subcategory data-structure as json in your post. (and using more meaningful variable names than x and y also often helps other people understanding your code) — Reto
– Reto, Commented Mar 31, 2015 at 8:07

kasoban · Accepted Answer · 2015-03-31 08:19:21Z

2

You don't need to interpolate your category ID in the filter, the ng-repeat makes it available as a scope variable.

So instead of

<tr ng-repeat="y in SubCategories | filter:{mapid: {{ x.id }}  }:true">

use

<tr ng-repeat="y in SubCategories | filter:{mapid: x.id}:true">

answered Mar 31, 2015 at 8:19

kasoban

2,16717 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to pass parameter for filtering the result in AngularJS

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related