Exploring AngularJS and its ng-repeat directive along with ng-style

I'm having trouble getting ng-style to work properly with ng-repeat.

Here is my code snippet:

<div style="display:table-row" ng-repeat="row in Data.Communications" id="{{row.Guid}}">
    <div style="display:table-cell;">
      <img ng-src="{{row.Path}}" ng-show="row.Path" ng-style="row.Style" />
      <i class="{{row.Icon}}" ng-show="row.Icon" ng-style="row.Style"></i>
    </div>
</div>

And here is the JSON data retrieved from server-side database:

$scope.Data: {"LastUpdate":"23/03/2016 11:45","Communications":[{"Guid":"2","Path":null,"Icon":"fa fa-warning","Style":"{'color':'#ffff00'}"},{"Guid":"1","Path":null,"Icon":"fa fa-warning","Style":"{'color':'#ffff00'}"},{"Guid":"3","Path":"/images/blink_yellow.gif","Icon":null,"Style":"{'width':'15px', 'height':'15px'}"}]}

Despite specifying the "Style", it's not being applied to my elements. Any suggestions on how to resolve this issue would be greatly appreciated.

javascriptcssangularjsangularjs-ng-repeatng-style

Answer №1

To ensure the JSON is correctly formatted, you need to parse it before assigning it to ng-style.

ng-style="doParseToJson(row.Style)"

Code

$scope.doParseToJson = function(style){
   return JSON.parse(style);
}

Furthermore, make sure that the response is wrapped in double quotes instead of single quotes like '{"color":"#ffff00"}' in order to maintain the validity for parsing the JSON.

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

"Embrace the power of Ajax and JSON with no regrets

function register() { hideshow('loading', 1); //error(0); $.ajax({ type: 'POST', dataType: 'json', url: 'submit.php', data: $('#regForm').serialize(), su ...

phpjavascriptjqueryajaxjson

Ways to customize the border color on a Card component using React Material UI

Is there a way to change the border color of a Card component in React Material UI? I attempted using the style property with borderColor: "red" but it did not work. Any suggestions on how to achieve this? ...

javascriptreactjsmaterial-ui

Can you tell me the name of the unique animated style featured on the new iMac Pro page?

Is it possible to replicate the animation seen on the Apple iMac Pro page using only HTML5 and CSS3? What is this particular type of animation called? Visit the Apple iMac Pro page for reference. ...

htmlcss

Fixing Sticky Navigation Bar on Scroll (JavaScript, HTML, CSS)

I'm working on this site as a fun side project, but I've hit a roadblock. The sticky nav bar I implemented jumps when the user scrolls down far enough. Despite reading through other discussions, I can't seem to figure out the solution. I su ...

javascripthtmlcss

How to show the current week using React Native

Looking to show the current week of the month in a specific format using react-native: (Week 2: 05.10 - 11.10) (for example, displaying week 2 of the current month) Any ideas on how to make this happen? I'm aware of packages like momentjs that can ...

javascriptreactjsreact-nativedatemomentjs

What could be causing my custom Google font in CSS to not function properly?

I've been trying to change the font-family from Google Fonts in my Bootstrap 5 project, but it's not working as expected. Here's a snippet of my code: HTML <div class="row"> <div class="col-lg-6 col-md-12" ...

htmlcssfontsframeworksbootstrap-5

The o-gradient feature is not compatible with Mac and Linux operating systems

Hello there! I am facing an issue with creating a gradient on my website without using an image. Surprisingly, the gradient appears on Windows but not on Mac or Linux operating systems. Any idea why this might be happening? You can check out the website he ...

htmlcss

Utilizing Angular to load specific external scripts in partial views with ui-router

Within my app, I have configured ui-router and in a specific state called "MAP," I aim to incorporate a 3rd party JavaScript file. Presently, this file is included in my Index.html at the bottom of the page. However, I am contemplating that it might be mo ...

angularjsangular-ui-router

centralizing ng-click event logging

For my AngularJS application, I want to keep track of how each user is interacting with it. To achieve this, I am currently implementing a logging mechanism on the client side to record user clicks and then transmit this data to my server. My main query r ...

loggingclickangularjs

Organize items within a compartment using Bootstrap3

I have decided to update my website to Bootstrap3 and encountered a common issue that many others seem to be facing as well. I am trying to evenly distribute 4 elements, each approximately 220px wide, inside a 990px container. In the old version of Bootstr ...

csstwitter-bootstrapresponsive-designtwitter-bootstrap-3

Enhancing Django's login form validation with AJAX

I'm trying to implement an AJAX login feature in Django. The goal is to check if the user has provided the correct username and password. Take a look at my current code setup: urls.py urlpatterns = [ url(r'^$', views.home_view, name=&a ...

javascriptjquerypythonajaxdjango

Tips for patiently waiting for a series of asynchronous calls to successfully complete

I have a scenario where I am dealing with multiple asynchronous calls that are dependent on each other's success. For example: function1 = () => { /*Some required Logic*/ return fetch("myurl") .then((json) => { functi ...

javascriptjqueryajaxasync-await

Monitor modifications to the form as the user navigates away from the page or refreshes

Currently, I am working on a form that was created using Formik and React Hooks. I would greatly appreciate any suggestions on how to track changes made to the form when a user clicks the home button or refreshes/reloads the page. I attempted to use the b ...

javascriptreactjsreact-hooksformik

The robots.txt file in Nuxt.js allows for multiple disallow directives for each user agent

With the Nuxt module called nuxt-robots, how can I set up multiple disallow rules per user agent? Currently, my configuration looks like this: robots: () => { return { UserAgent: '*', Disallow: '/search/', Si ...

javascriptvue.jsnuxt.jsrobots.txt

Angular post request does not update the table

After displaying a table and a form on a page, I encountered an issue where the table does not update with new data when submitting the form. Even after refreshing the page, the new data is not reflected. As a newbie to Angular, I'm unsure of what exa ...

javascriptangularjs

Having trouble fetching data from Firebase database on the web platform?

Currently, I am in the process of developing a web application using Firebase 3 as my main tool. However, I am encountering difficulties when it comes to retrieving data from my page. To test this functionality, I have created a NodeJS app on Heroku and a ...

javascriptnode.jsherokufirebasefirebase-realtime-database

A guide on updating the value of a two-dimensional array using the useState() hook

Take a look at this Codesandbox example demonstrating my issue. Experiment by typing some words into both text areas to observe the problem. I have just started learning React. My goal is to dynamically generate an svg element based on user input. I am br ...

javascriptarraysreactjsreact-hooks

Ensuring complete height and width with no scrollbar in a Material UI React application

I'm attempting to create a page that fills the entire height of the screen without adding an undesirable scrollbar. When I say 100% height, I mean it should just fit the size of the screen. Here is a demonstration of the issue. The yellow highlighted ...

htmlcssreactjsmaterial-ui

execute jquery slidedown animation when the page is loaded

Is there a way to use jQuery to slide down a div on page load when its CSS is set to display:none? I've come across various solutions, but none seem to work if the div is initially hidden. The challenge is finding a method that hides the div on load a ...

jquerycssslideslidedown

Using Vuejs to dynamically render raw HTML links as <router-link> elements

Hey there, I'm just getting started with VueJS and I've been doing some interesting experiments. I created a backend service using Python/Flask that provides me with a string of HTML code containing many tags. My goal is to render this HTML insid ...

javascripthtmlvue.jsfrontend