Using dynamic variables in AngularJS ng-repeat allows for a flexible and customizable

While working within a loop to retrieve an ID, I attempted to set up another loop as shown below:

<ul ng-show="feed{{raterie.idFB}} === true" ng-init="var myFeed = myFeedFunction(raterie.idFB);">
        <li ng-repeat="feed in getFeeder(raterie.idFB) | limitTo:1">adoptions are : {{feed.title | cleanit}}</li>
        <li ng-repeat="feed in feeder{{raterie.idFB}} | limitTo:1">adoptions are : {{feed.title | cleanit}}</li>
        <li ng-repeat="feed in feeder{raterie.idFB} | limitTo:1">adoptions are : {{feed.title | cleanit}}</li>
        <li ng-repeat="feed in feeder[raterie.idFB] | limitTo:1">adoptions are : {{feed.title | cleanit}}</li>
        <li ng-repeat="feed in feeder['raterie.idFB'] | limitTo:1">adoptions are : {{feed.title | cleanit}}</li>
        <li ng-repeat="feed in myFeed | limitTo:1">adoptions are : {{feed.title | cleanit}}</li>
        <li ng-repeat="feed in feeder846097918756247 | limitTo:1">adoptions is : {{feed.title | cleanit}}</li>
    <ul>

I am struggling with automatically constructing 'feeder846097918756247'. The last li element is the desired output, but currently I only have one example manually inserted into the first loop.

I have tried two solutions using $scope:

// define the value for ng-repeat (1st solution)
$scope.getFeeder = function(id) {
        var idr = 'feeder' + id;
        return idr;
    }
// define the value for ng-repeat (2nd solution)
function myFeedFunction(pId) {
        return eval('feeder' + pId) ;
    }

Unfortunately, neither of these solutions seem to work properly.

You can access my online app here:

Answer №1

If you want to make

<li ng-repeat="feed in getFeeder(raterie.idFB) | limitTo:1">adoptions are : {{feed.title | cleanit}</li>

function as intended, the array needs to be returned from the scope property within the getFeeder function.

$scope.getFeeder = function(id) {
    return $scope['feeder' + id];
}

Alternatively, rather than directly assigning feeder846097918756247 to the scope as a property, store the relevant data in an object on the scope.

For example:

 $scope.feeder = {};
 $scope.feeder['846097918756247'] = someArray;
//etc...

Then simply use:-

<li ng-repeat="feed in feeder[raterie.idFB] | limitTo:1">adoptions are : {{feed.title | cleanit}}</li>

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

Serve the JS files in Express separately

I am facing issues with my webapp loading too slowly when using the express.static middleware to serve all my js files. I am considering serving each js file only when needed, such as when serving the html from jade that uses the js file. I have attempted ...

What are the implications of storing data on the browser in the form of a JavaScript array?

Below is the code I have written: var back_arr = [], forward_arr = [], i = 1; $('button').on('click', function(){ var new_value = $('input').val(), old_value = $('.content').html(); i = i + 1; ...

Have I properly utilized the $stateProvider in AngularJS with this syntax?

I have implemented the following code snippet for route handling, however, I am experiencing issues when navigating to the #/posts route: app.config([ '$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider ...

Tips for customizing the appearance of currency in Angular using ngBind

Currently, I am attempting to achieve this design using angularjs and css: https://i.sstatic.net/l1wv6.png The specific requirement is to display the decimal part of a number in the upper right corner, similar to what's shown in the image. While ng-b ...

Validation does not occur once the data has been loaded

I developed a function that calculates the percentage of form completion. However, I am encountering an issue where when editing an existing record, the validation does not kick in until data is edited in one of the inputs. <div ng-form="dtform" class ...

Creating an array like this in JavaScript during an API call using Ajax

"WorkingHours": { "Monday" : { "open" : "10:00 am", "close" :"5:00 pm" }, "Wednesday" : { "open" : "10:00 am", "close" :"5:00 pm" ...

Tips for dynamically adjusting price values in Magento

As someone new to Magento, I am looking to update the price value on a product's detail page dynamically using Ajax. Additionally, I would like this updated price to reflect in the cart page as well. To see an example of what I'm trying to achie ...

"Looking to navigate to the bottom or shift focus to the bottom in an Angular application? Here's

In the div, I have added an element and I am looking to automatically scroll to the bottom of the div every time a new element is added. While I know how to achieve this using jQuery, I am unsure of how to do it using AngularJS. The id of the div is testC ...

Style the date using moment

All languages had a question like this except for JavaScript. I am trying to determine, based on the variable "day," whether it represents today, tomorrow, or any other day. ...

Issue: Module '@discordjs/opus' is not found

My Discord speech recognition code runs successfully but encounters an error as soon as it joins a channel. The error message displayed is: "Error: Cannot find module '@discordjs/opus'". Require stack: - C:\Users\SURYASH\Desktop&bs ...

Innovative Audio Editing Tool using Javascript

Currently, I am in the process of creating a JavaScript-based audio editor that will allow users to record, play, and edit audio files. It is crucial for the tool to be able to visualize both real-time recorded audio and selected/uploaded audio files. Whil ...

Avoiding the insertion of styles into the HEAD section when using Webpack MiniCssExtractPlugin in combination with Create React

Currently, I am utilizing create-react-app to develop a component library with Storybook JS. The ultimate goal is to release an NPM package containing these components for use in various projects. Within this library, SASS is employed, complete with global ...

Error TS2346: The parameters provided do not match the signature for the d3Service/d3-ng2-service TypeScript function

I am working with an SVG file that includes both rectangular elements and text elements. index.html <svg id="timeline" width="300" height="100"> <g transform="translate(10,10)" class="container" width="280" height="96"> <rect x ...

Issue with Javascript variables

In Javascript, I have an array of strings that I need to use for loading images on my page through AJAX. After each image is loaded, there are additional tasks to be performed which include sending a HTTP request to delete the image. Below is the code I c ...

Puppeteer patiently waits for the keyboard.type function to complete typing a lengthy text

Currently, I am utilizing puppeteer for extracting information from a particular website. There is only one straightforward issue with the code snippet below: await page.keyboard.type(data) await page.click(buttonSelector) The initial line involves typin ...

Identifying Seating Arrangements at the Poker Table - Sit-and-Go Events

Note: The JavaScript code has been implemented based on the answer provided by ajrwhite. Hopefully, it proves helpful to someone. Link: http://codepen.io/eMineiro/pen/EKrNBe Be sure to open the CodePen console to see the examples in action. When playing ...

Custom Navigation Buttons in Bootstrap

I am trying to add a "next" and "previous" button to my Bootstrap Nav on my website. I have attempted this suggestion, but it ended up not updating my nav-tabs correctly and interfering with some of the bootstrap scripts that were in use. This is the curr ...

The simultaneous execution of several ajax requests is leading to jumbled data sets

I've been working on a phonegap application that utilizes jQuery Mobile for its primary structure. During the execution of the app, various ajax calls are made to fetch the latest data. For example, a list of items is fetched for the homepage, while ...

Turn off the feature that prohibits the use of variables before they are

I'm struggling to disable this setting in my tsconfig file. The TS documentation doesn't seem to have any information about how to do it. no-use-before-declare I'm facing an issue where my test stub data objects are interfering with each ot ...

Bootstrap dropdown menu experiencing functionality issues

I am facing an issue with implementing the javascript bootstrap file in my project. The dropdown menu is not working as expected even though I have saved bootstrap to my project folder. I have tried looking at other example codes and even copied and paste ...