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

Answer 1

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