Using a bound data variable in a filter within an ng-repeat loop (Angular JS)

Question

Using a bound data variable in a filter within an ng-repeat loop (Angular JS)

<!-- Left Navbar -->
<div class="container-fluid" style="margin-top: 50px">
<div class="row">
    <div class="col-sm-3 col-md-2 sidebar">
        <ul ng-repeat="type in types" class="nav nav-sidebar">

            <li>{{type}}</li>                
            <li ng-repeat="sensor in sensors | filter: { type: {{type}} }"><a href="#">{{sensor.name}}</a></li>

        </ul>
    </div>
</div>

I want to create a dynamic navigation bar using AngularJS, where each sensor type acts as a category and lists all related sensors. I have an array of sensors stored in the "sensors" scope variable and distinct sensor types in the "types" array.

javascript angularjs angularjs-ng-repeat angularjs-filter

Answer 1

Answer №1

Assuming the structure of the data is defined in the following way

function Controller($scope) {
    $scope.categories = [
        "Category A", "Category B"
    ];

    $scope.products = [{
        "category": "Category A",
            "name": "Product AA"
    }, {
        "category": "Category B",
            "name": "Product BB"
    }];
}

Implement the following syntax:

ng-repeat="product in products | filter: {'category': category}"

Answer 2

Assuming the structure of the data is defined in the following way

function Controller($scope) {
    $scope.categories = [
        "Category A", "Category B"
    ];

    $scope.products = [{
        "category": "Category A",
            "name": "Product AA"
    }, {
        "category": "Category B",
            "name": "Product BB"
    }];
}

Implement the following syntax:

ng-repeat="product in products | filter: {'category': category}"

Using a bound data variable in a filter within an ng-repeat loop (Angular JS)

Answer №1

Similar questions

Instead of displaying a regular text box, the output unexpectedly shows "Printing [object HTML

Looking for an easy solution in RegExp - how to locate the keys?

Filtering Images by Alt Attribute: A Comprehensive Guide

Exploring the process of generating multiple drop-down menu items in ASP.NET using AngularJS

Is there an easy method for customizing scrollbars?

Tips on adjusting the hover color in the data grid

Exploring the compatibility of Angular.js with iframes in Firefox

Maintain MUI Autocomplete in the open state even after making a selection from the

Three-handled slider

Issue encountered: Next.js has failed to hydrate properly due to a discrepancy between the initial UI and server-rendered content

Get the large data file in sections

Creating static HTML files for non-static pages using Next.js SSR/ISR

Deactivate toggle effect by clicking on a different link

Guide to setting up Firebase pagination in a NextJS 13 server component

Using Q to conduct polling asynchronously with promises

The state variable remains undefined even after integrating useEffect in a React.js component

eliminating the existing listener directly from EventM

The installation of the material ui package was unsuccessful

Advantages of optimizing NodeJS/TypeScript application by bundling it with webpack

Having trouble bringing my custom-built Angular module into my Angular application