Utilizing AngularJS ng-repeat, generate dynamic HTML content by calling a function to retrieve data

Just starting out with angularjs and trying to unravel the mystery here.

Using ng-repeat:

<li class="widget flip-container" ng-repeat="widget in widgets">
                 <div class="widgetContent" ng-bind-html="getData(widget.UserWidgetId,widget.Url)">
                 </div>
</li>

The getData function looks like this:

 $scope.getData = function(id, url) {
            if (url == null || url == "") return "";                

            return userWidgetsFactory.getWidgetHtml(url).success(function(results) {
                return results;
            });
        };

Here's the factory code:

app.factory("userWidgetsFactory", function($http) {
        var factory = {};
        factory.getWidgetHtml = function(url) {
            return $http.get(url);
        };
        return factory;
    });

I'm encountering an issue where the function keeps getting called repeatedly and doesn't stop. I have a feeling I'm way off base here.

Answer №1

Consider this approach... implementing ng-bind-html will introduce a watch.

<li class="widget flip-container" ng-repeat="widget in widgets" ng-init="testdata = fetchData(widget.UserWidgetId,widget.Url)">
                 <div class="widgetContent"> {{testdata}}
                 </div>
</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

When you include ng-href in a button using AngularJS, it causes a shift in the alignment of the text within the button

Recently, I've been delving into Angularjs with angular-material and encountered a slight issue with ng-href. I created a Toolbar at the top of my webpage, but the moment I include the "ng-href" attribute to a button, the text inside the Button loses ...

Tips for managing, showcasing, and modifying checkbox controls within an AngularJS environment

I have successfully completed the saving part of the code. Below, I am demonstrating how I displayed the saved data and my attempts to edit the form upon clicking the edit button. Here is my AngularJS code: var module = angular.module('myApp&apos ...

Turn an existing string into a new string where each character is changed to an asterisk, and spaces remain as spaces

I am attempting to create a new string from an existing string using javascript. In the newly generated string, all characters except for spaces would be represented by '*'. For instance, if the original string is "hide me" then the resulting ...

Tips for passing a URL variable into an Ajax script to prefill a form input in a search field

I have a website with a search feature that dynamically queries a database as you type in the search field, similar to Google's search suggestions. This functionality is achieved through AJAX. As the results appear on the page while you enter your se ...

How can we replicate user input in React for unit testing purposes?

Struggling to unit test a React component that accepts user input, specifically the onChange function within the component. Unable to set the input value despite trying various methods found online. Below is the component under test: class Input extends C ...

Employing the Map function in React leads to an error that is undefined

Upon simplifying my code, it seems that I am encountering an unresolved issue with the map function being used in different locations. I have noticed that code from examples running on platforms like Codepen does not work in my locally created react app p ...

Safari has trouble with AJAX cross-origin requests, while Chrome and Firefox handle them without issue

I am developing a Shopify app that utilizes script tags and requires an ajax call to our server to retrieve necessary information about the shop. While everything seemed to be functioning correctly, my colleague pointed out that it was not working on his i ...

Is there a way to create an effect where the color of a floating action button changes when you hover over it, similar to a filter?

I'm new to using the <Fab /> element and I'm struggling to figure out how to implement a hover effect that will change the button's color. Here's what I have so far: JavaScript: <Fab variant="extended" className=&quo ...

What are some effective design principles for creating REST APIs in expressjs?

To streamline my code organization, I made the decision to create a methods folder. Within this folder, I store individual JavaScript files for each URL endpoint (such as website.com/billings). //expressJS configuration... const billings = require('. ...

transforming an angularJS directive into an angular6 component/directive

I have inherited an angularJS directive from an old application that I need to convert to angular6. Since I am not familiar with angularJS and only work with angular6, I am seeking guidance on how to proceed. Below is the existing angularJS code: define ...

My browser is being overwhelmed by jQuery's each() function while trying to manipulate a large set of elements. How can I optimize my code to reduce the strain on my browser

Currently, I am utilizing two custom plugins to identify and style all the radio/checkbox inputs and select boxes within a form. The issue arises when dealing with a large form that contains numerous checkboxes, causing Firefox to stall as the plugin atte ...

Utilizing jQuery and AJAX, execute a PHP query based on the user's input and showcase the query's outcome without reloading the page

For the past 24 hours, I've been on a quest to find a solution. Although I've come across similar inquiries, either the responses are too complex for my specific scenario (resulting in confusion) or they are of poor quality. The crux of my issue ...

The client continues to request the file through the REST API

I have noticed a behavior with an audio file stored on the server that clients can request via a REST API. It seems that every time the audio is played again, a new request is sent to the server for the file. Is there a way to prevent this or cache the dat ...

Exploring AngularJS: Enhancing User Experience with Dynamic Dropdowns and

I'm currently working with two object structures: one for users and another for groups. The user object includes the group IDs that each user belongs to, while the group object provides information such as ID, name, and type of group (e.g., hierarchy) ...

Generating an array of keys from duplicated values in Typescript

My data is structured in the following array format: { itemTitle: 'value example', itemType: 'value example', itemDescription: 'value example', itemFamily: 'Asset', }, { itemTitle: 'val ...

Implementing SVG in NextJS 13 with custom app directory: A step-by-step guide

Recently, I decided to explore the app directory and unfortunately ran into some issues. One of the main problems I encountered was with image imports. While PNG images imported without any problem, SVG images seemed to break when importing in /app. For i ...

Guide on transforming an array of objects into a fresh array

I currently have this array: const initialData = [ { day: 1, values: [ { name: 'Roger', score: 90, }, { name: 'Kevin', score: 88, }, { name: 'Steve&apo ...

Error: Unsupported Media Type when attempting to send JSON data from an AngularJS frontend to a Spring controller

Below is the controller function code snippet @RequestMapping(value = "/logInChecker", method = RequestMethod.POST, consumes = {"application/json"}) public @ResponseBody String logInCheckerFn(@RequestBody UserLogData userLogData){ Integer user ...

Encountering a Module Error in AngularJS and Laravel Blade when Altering the interpolateProvider (Delimiter)

I am facing a peculiar issue when I try to integrate Laravel 5 (with Blade) and Angular 1.3 together. While I am well-versed with Laravel, I am relatively new to Angular. I understand that in order to make Angular work seamlessly with Laravel's Blade ...

The application experiences a sudden failure when Mongoose is unable to locate the specified item

I am facing an issue where my app crashes when mongoose is unable to find the item. I want to display a 404 error page instead. Here is the code snippet: try { let theBeverage = Product.findOne({ _id: beverageId }); await theBeverage.then((data) ...