Nested ng-repeat for dynamic variable rendering

I am facing an issue where I have a nested ng-repeat directive. I am attempting to create a dynamic second ng-repeat, using a key from the first one, but the current syntax is not working. Is there a different way to achieve this? Perhaps a different notation?

<div class="entry" ng-repeat="(key, choice) in choices">
    <div >
        <div ng-repeat="option in fields['user_' + key].options | filter : {v:choices[key].junior.v}" class="box-content-value">{{option.l}}</div>
    </div>
</div>

The filter functionality works fine as it's an object, however fields.user_$ is not, and requires combining a string with a variable to function properly.

Note: 'choices' is simply an array of JavaScript objects and is not relevant for this query.

On the other hand, the structure of 'fields' is as follows:

"fields": {
    "user_0": {
        "display": true,
        "options": [{
            "k": 0,
            "v": "",
            "l": "Please select"
        }, {
            "k": 1,
            "v": "male",
            "l": "Male"
        }, {
            "k": 2,
            "v": "female",
            "l": "Female"
        }],
        "read_only": false
    }
}

Hence, my goal is to display the full value of fields.options.l based solely on its fields.option.v property. This is why I am utilizing a filter in this scenario.

Answer №1

Opt for using $index rather than key:

<div class="item" ng-repeat="selection in selections">
    <div>
        <div ng-repeat="alternative in options['user_' + $index].choices | filter : {value:selection.max.value}" class="data-display-section">{{alternative.label}}</div>
    </div>
</div>

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

React Native tutorial: Changing button color on press

When a user clicks on the TouchableOpacity element, I want to change the color of the button from the default gray to blue. Initially, the 'checked={this.state.newProjects}' newProjects variable is not present in the state, so when clicked it sho ...

What could be causing the 405 error in my post request?

While attempting to send a post request to Firebase through my Vue app, I keep encountering an error illustrated in this image. I have a webpack server running and the website is on localhost:8080. However, I also have a live version hosted on hostinger a ...

Is there a way to assign multiple paths to a single page within the NextJS pages directory?

I'm currently working on a project that has two different themes, and I have the ability to switch between them based on the environment. Everything works perfectly, but I'm encountering an issue with paths. Some pages should open with different ...

JWT authentication for restricted routes

I'm currently developing an application that requires users to log in and allows them to join private groups. I have successfully implemented the login part using JWT, but I'm struggling with how to prevent users from joining private groups until ...

Validation of dynamically generated name fields using radio button group

CODE: html <form id="myform" type="post"> <fieldset id="myid1"> <input id="entries_8490_burn_id_1" name="entries[8490][burn_id]" value="1" type="radio"/> <input id="entries_8490_burn_id_2" name="entries[8490][burn ...

Switching hover behavior on dropdown menu for mobile and desktop devices

I have implemented a basic JavaScript function that dynamically changes HTML content based on the width of the browser window. When in mobile view, it removes the attribute data-hover, and when in desktop view, it adds the attribute back. The functionalit ...

Exploring the interaction of karma, jasmine, Angular, and UI router through testing the resolve function when using state.go with parameters

In my Angular module "moduleB", I have the state defined as shown below: $stateProvider .state('stateB', { parent: 'stateA', abstract: true, templateUrl : base ...

Issue encountered in Babel version 6 with the transform-es2015-classes plugin in loose mode, causing a SyntaxError when using async/await

After updating to the latest version of Babel v6, I encountered an issue with the transform-es2015-classes plugin in loose mode (https://github.com/bkonkle/babel-preset-es2015-loose/blob/master/index.js#L8) causing problems with async/await functions. Here ...

Creating a progress bar with a circular indicator at the completion point

Looking to create a unique horizontal progress bar with a circle at the end using react js, similar to the image provided. Successfully implemented a custom "%" progress bar and now aiming to incorporate a circle with text inside at the end. https://i.sst ...

Facing the Challenge: Overcoming Concurrency Issues with Promises

In the function "myMethod" within my "gulpfile.js", I aim to generate multiple Promises based on the size of an array passed as a parameter. It is crucial for all promises to be fulfilled before proceeding with any further actions upon calling this functio ...

Compiling this HTML template in dev mode with Vue is agonizingly slow

I've been working with a template app setup that was bootstrapped using vue CLI. Within one of my components, I have 20 nested div tags. During development mode, it's taking roughly 10 seconds to compile this component. The more deeply I nest HTM ...

The data from the Rails hidden_field or JavaScript array is being submitted in the form of a comma-separated string instead of

Previously, I utilized a collection_select to create a <select> element with <options>. <%= f.label :members, class: "mdl-textfield__label" %> <%= f.collection_select :user_ids, User.where.not(id: current_user).collect, :id, :emai ...

When utilizing "reques" in Node.js code, the parameter response.timings may be found to be undefined

The code I created in node.js is giving me trouble - for some reason, response.timing is showing up as undefined. Any idea what could be causing this issue? const request = require("request"); request.get({ time : true, url : 'https://www.bbc.com ...

Transferring previously obtained data to templateProvider within AngularJS

I'm currently working with AngularJS 1.3 and UI-Router. I have a state set up with a resolve and a templateProvider. My goal is to utilize the data fetched from the database in the resolve within the templateProvider without having to make duplicate ...

Sliding horizontally with a responsive touch

I am looking to implement a horizontal responsive page navigation, similar to the illustration shown below: This is my current progress: DEMO $(document).ready(function () { var slideNum = $('.page').length, wrapperWidth = 100 * s ...

How can function expressions result in a returned value?

Function expressions result in a value, unlike function declarations which do not. This distinction was clarified for me by others in a different SO thread (link provided). All functions default to returning undefined, hence the emphasis on "expression" ...

The continuous progression of code execution

Having a background in Java, I decided to dive into learning Angular2 recently and have been working on it. However, I encountered a confusing situation in one of my projects that I could not figure out. For the pagination feature I was implementing, I ne ...

Reliable Dropdown Navigation Bars

Once I have successfully implemented three dynamic drop down menus using the combination of jQuery, AJAX, and PHP, the next challenge arises. After populating the dropdown menus based on user selections (e.g., selecting a value in the first dropdown menu ...

Is there a way for multiple <select> elements to have identical options in React?

Currently, I have a React component structured like this: export default function ExampleComponent() { return ( <div> <select required name="select1"> <option label=" "></opti ...

The ng-repeat directive is failing to properly iterate over a key-value pair when the key contains a special character such as

When using ng-repeat with key value pairs that contain special characters such as ($), it may not work properly. For example: <div ng-repeat="(key, value) in values">{{key}}</div> In this case, if the values object is defined as below: $sco ...