Utilizing dynamic values for filtering within two nested Ng-repeat directives in AngularJS

For the second ng-repeat, I want to filter based on a dynamic value obtained from the first ng-repeat. Below is my code snippet:

<div ng-repeat="all in all | unique: 'Category'">
   <p>{{all.Category}}</p>
      <div class="list" ng-repeat="tabs in tabs | filterBy: ['Category']:  '{{all.Category}}'">

I have attempted the above code, but it seems that the filterBy function within the second ng-repeat is not functioning as expected. Any suggestions or advice would be greatly appreciated. Thank you!

Answer №1

I'm having trouble understanding the second filter parameter you mentioned, but it seems like you should consider using something similar to this:

<div ng-repeat="all in all | unique: 'Category'">
  <p>{{all.Category}}<p>
    <div class="list" ng-repeat="tabs in tabs | filter: all.category">

If I've misunderstood your issue, please let me know so that I can revise my answer accordingly or remove it if I am unable to assist. This solution is based on the assumption that all.category is a string (as I don't have insight into the contents of your object).

(Correction: A mistake was made... Your second ng-repeat needs to be nested inside the first one.)

Answer №2

To achieve nested ng-repeat, you must include a div within another div. Take a look at the DEMO for reference.

HTML

<div ng-app ng-controller="myCtrl">

    <input type="text" ng-model="textSearch" placeholder='name Search'>
    <div ng-repeat="all in userList | filter:textSearch" class="parent">
    {{all.name}}
      <div ng-repeat="child in all.child" class="child">
      {{child.value}}
      </div>
    </div>
</div>

Controller

function myCtrl($scope) {

    $scope.userList=[{
    'name':'Anil',
    'address':'Mumbai',
    'id':1,
    'child':[{
            "id": "0",
            "unit": "10",
            "value": "21000",
            "others":"N"
        },{
            "id": "0",
            "unit": "10",
            "value": "12000",
            "others":"N"
        },{
            "id": "0",
            "unit": "10",
            "value": "22000",
            "others":"N"
        }]
    },{
    'name':'Sunil',
    'address':'Delhi',
    'id':1,
    'child':[{
            "id": "0",
            "unit": "10",
            "value": "21000",
            "others":"N"
        },{
            "id": "0",
            "unit": "10",
            "value": "12000",
            "others":"N"
        },{
            "id": "0",
            "unit": "10",
            "value": "22000",
            "others":"N"
        }]
    },{
    'name':'Manil',
    'address':'Varansasi',
    'id':1,
    'child':[{
            "id": "0",
            "unit": "10",
            "value": "21000",
            "others":"N"
        },{
            "id": "0",
            "unit": "10",
            "value": "12000",
            "others":"N"
        },{
            "id": "0",
            "unit": "10",
            "value": "22000",
            "others":"N"
        }]
    }]
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Iterating through an array step by step in NodeJS with a delay before processing each element

I have a set of instructions stored in an array that must be executed in a specific sequence: const commands = [ `git clone https://github.com/EliLillyCo/${repo}.git`, `cd ${repo}`, `git checkout -b ${branch}`, 'cp ../codeql-analysis.yml .github ...

Using JavaScript code to dynamically display the value of the variable MyProperty in HTML

Are there any limitations when using this construction in JavaScript? In my codeBehind, there is a property with intricate logic in the get method. It calls other methods and despite debugging showing a good value, it returns an empty string. I'm curi ...

Navigating through concatenated JSON strings in a web browser: A step-by-step guide

I am currently using Socket.IO to transmit data to the browser. The information being sent is a continuous stream of JSON objects, which upon arrival at the browser, transforms into a single large JSON string. However, the issue I am encountering is that t ...

How can I access a variable from a global.asax ASP.NET file in an Angular TypeScript file?

Is there a way to retrieve a variable from the .NET global.asax file and pass it into an Angular app that is part of the same project with just .ts and .html files? ...

Confirming the accuracy of multiple fields in a form

Looking for help with validating both password and email fields on a registration form. I've successfully implemented validation for passwords, but need assistance adding validation for the email section as well. Can both be validated on the same form ...

The ng-model does not update the value set in the controller

After testing out my code, I noticed that the following snippet in my view performs as expected. The player_id gets updated whenever a new selection is made: <div class="form-group"> <select class="form-control" ng-model="player_id" ng-change ...

Unleashing the power of JavaScript: Sharing arrays and data structures effortlessly

Currently, I am utilizing HTML & JavaScript on the client side and NodeJs for the server side of my project. Incorporated in my form are multiple radio buttons. When the user clicks on the submit button, my intention is to post the results to the server. ...

Retrieve an object using the coordinates (x,y) from a given list

I am working with a two-dimensional array, matrix[2][2], that I have stored in a list: var list= ["a","b","c","d"]; In addition to the list, I also have two specific coordinates: var x = 0; var y = 1; My goal is to ...

Setting up external routes in Express: A step-by-step guide

For my Express application, I successfully set up the index route. Now, I'm facing an issue with adding a new route named cart for the shopping cart page. Whenever I try to access the cart route, I encounter a 404 error, which is odd considering it&ap ...

Issue with vue-template-compiler in Vue.js 3 webpack configuration

I am currently working on integrating vuejs 3 into a project that already utilizes webpack. I have been looking into using vue-loader as part of this process. After consulting the official documentation, I came across the following information: Every new ...

Is there a way to verify the collectionFS database?

Is there a comparable method to query the CollectionFS database similar to how we access mongoDB? For instance, in mongoDB I can open the command line and navigate to the meteor project directory, then type "meteor mongo" followed by "db.users.find()". H ...

Encountered an issue with Nextjs dynamic routes and static pages where the error message states that the `paths` variable needs to be an

I have been following the official Next.js guide on generating statically generated pages with dynamic routes (Nextjs - Dynamic Routes). However, I am facing an issue when trying to generate pages with fetched data. The error message I am receiving is as f ...

Encountering difficulties in setting up an Angular 5 project with angular-cli

Despite multiple re-installations, I am unable to use angular-cli 1.6 with ng. sudo npm install -g @angular/cli --unsafe-perm /usr/bin/ng -> /usr/lib/node_modules/@angular/cli/bin/ng npm WARN @schematics/<a href="/cdn-cgi/l/email-protection" class= ...

What is the reason file inputs do not trigger 'input' events, while 'change' events do fire?

Trying out a basic input: <input type="file"/> Noticing that the input event doesn't trigger when a new file is selected: $('input').on('input', function(event){ console.log('input value changed', event.targe ...

Encountered a NodeJS error while attempting to locate information in a mongo DB: UnhandledPromiseRejectionWarning

In my MEAN stack application, I am working on implementing a login feature that includes social login functionality. When a new user attempts to log in using Facebook, I need to verify if their Facebook account is already registered in my MongoDB database. ...

Angular 5 with Typescript encountered a failure in webpack due to the absence of the property "data" on the Response

I am encountering an issue during webpack compilation. It compiles successfully if I remove .data, but then the page crashes with calls from template->component (which in turn calls a service). Here is the error I am facing: ERROR in src/app/compone ...

What are some strategies to enhance the performance of JavaScript pagination to ensure it functions effectively for varying numbers of pages?

Currently, I am working on building Vanilla Javascript Pagination. I encountered an issue where the pagination seems to work flawlessly only when there are precisely 7 pages. If the page count exceeds or falls below 7, some minor bugs start to surface. I h ...

Guide to setting the ng-selected value within AngularJS

I am currently working on a project where I have a select element in my AngularJS application. I am populating the options using JSON values with ng-repeat, and I want to display the first value from the JSON as selected by default. I have tried two diffe ...

Fade out embedded images or target specific classes when hovering over them with the mouse

Is it feasible to use JavaScript or jQuery to fade only the embedded image instead of the entire div, revealing the background image of the div? I have multiple instances of the classes below and wish to apply these changes only to the selected ones. For ...

When making xmlhttp requests, IE9 will prioritize loading from the cache rather than from the server when the data is available

During my local development process, I've been utilizing this AJAX code: function getChart(num,ld,margin,idr) { idr = typeof(idr) != 'undefined' ? idr : 0; $(ld).style.display="inline-block"; if (window.XMLHttpRequest) { ...