Using the outer ng-repeat's object property to filter nested ng-repeat items

Question

Using the outer ng-repeat's object property to filter nested ng-repeat items

I'm currently working on nesting two ng-repeats with two separate JSON files. The goal is to filter the second ng-repeat based on parameters from the first ng-repeat.

The first JSON file, $scope.matches, includes information about each match in the World Cup. The second JSON file, @scope.predictions, contains predictions made by users for each game.

My objective is to display a match as a header and then list all corresponding predictions underneath it. This process should be repeated for every match until all predictions are displayed accurately. I need to ensure that match.matchnumber equals prediction.matchnumber.

In my Plunker http://plnkr.co/edit/GQmYxZiO53nkIBVczaS9?p=preview, you can observe that the filter isn't functioning correctly because it's being applied to all object parameters instead of just matchnumber.

What would be the simplest approach to resolve this issue? Should I merge the JSONs into a filtered array? If so, what would be the most efficient method?

javascript angularjs mean-stack

Answer 1

Answer №1

To filter results based on a specific property, you can utilize an object with the property name as the key and the search term as the value:

ng-repeat="p in predictions | filter:{matchnumber: match.matchnumber}"

_{This filter will only display predictions where the matchnumber property matches match.matchnumber.}

You can also check out this recent demonstration.

_{It may not be very efficient to iterate through all predictions for each match in every iteration. A more optimal approach would involve processing both JSON files and creating a third one that contains all necessary data, eliminating the need for filtering in the view.}

Answer 2

To filter results based on a specific property, you can utilize an object with the property name as the key and the search term as the value:

ng-repeat="p in predictions | filter:{matchnumber: match.matchnumber}"

_{This filter will only display predictions where the matchnumber property matches match.matchnumber.}

You can also check out this recent demonstration.

_{It may not be very efficient to iterate through all predictions for each match in every iteration. A more optimal approach would involve processing both JSON files and creating a third one that contains all necessary data, eliminating the need for filtering in the view.}

Using the outer ng-repeat's object property to filter nested ng-repeat items

Answer №1

Similar questions

Creating a JSX syntax for a simulated component and ensuring it is fully typed with TypeScript

Mobile devices do not support HTML5 Video playback

HTML: Ensure that a user fills out a minimum of one text box before submission

Getting data from a document containing key value pairs

The issue of javascript Map not updating its state is causing a problem

Changing the default yarn registry for a specific project

Getting the values of $scope variables from AngularJS in the controller to the view

Utilize a standard JavaScript function from a separate document within a function of a React component

Concealing specific outcome by implementing jQuery and AJAX with a database

Tips for shifting a designated row upward in Chrome using JavaScript

How can one use C# and Selenium to send text to a hidden textarea with the attribute style="display: none;"?

Issue encountered while attempting to install the node-jasper package

After toggling the class, Jquery will no longer select the button

Troubleshooting: AngularJS filter is not functioning properly in combination with jQuery

Creating a JSON-based verification system for a login page

Activating a tab using a JS call in Bootstrap with the data-toggle attribute

Receive regular updates every week for an entire month using Javascript

Is there a way to confine a jquery script within the dimensions of the container div?

What makes Angular date pickers sluggish?

The attempt to create the maq module was unsuccessful