How to get data from a JSON file using Angular's ng-style

Question

I am making attempts to style elements based off the attributes highlighted in my JSON file. I am currently using ng-styleto call properties within the JSON objects

ng-style="{color: colors.color }"

The example above doesn't seem to be doing in regards to targeting styling the nodes on my DOM

Does any know how to resolve this issue.

{
 "colors": [
 {
"color": "red",
"value": "#f00",
"message": "Simple message"
 },
 {
"color": "green",
"value": "#0f0",
"message": "Message with <strong>HTML</strong> tags"
 },
 {
"color": "blue",
"value": "#00f",
"message": "Am I going to work? I should not! <script>alert('Hello!');</script>"
}]
}

HTML

<ul class="block-elements">
  <li ng-repeat="details in colors">
   <button ng-click="popupBtn()" ng-style="{color: colors.color }">Click Me</button>
  </li>
</ul>

CONTROLLER

"use strict";

var app = angular.module('nApp');

app.service("dataService", function ($http, $q){
var deferred = $q.defer();
$http.get('app/data/data.json').then(function (response){
    deferred.resolve(response.data);
 });

  this.getcolors = function () {
    return deferred.promise;
};
 })

  angular
  .module('nApp')
   .controller('dataCtrl', ['$scope', 'dataService', '$location', function($scope,    dataService, $location) {

 var promise = dataService.getcolors();
  promise.then(function (data){
  $scope.colors = data.colors;
  });

Hello 1. Do you read the file in a controller? 2. Use ng-style, no need for ng-attr-style — Ram Tobolski
– Ram Tobolski, Commented Jul 3, 2016 at 20:12
@RamTobolski i used ng-style in the first and it still doesn't work — NewBoy
– NewBoy, Commented Jul 3, 2016 at 20:23

developer033 · Accepted Answer · 2016-07-03 20:39:43Z

1

Here's is a snippet working:

var app = angular.module('app', []);

app.controller('mainCtrl', function($scope) {
  $scope.colors = [  
     {  
        "color":"red",
        "value":"#f00",
        "message":"Simple message"
     },
     {  
        "color":"green",
        "value":"#0f0",
        "message":"Message with <strong>HTML</strong> tags"
     },
     {  
        "color":"blue",
        "value":"#00f",
        "message":"Am I going to work? I should not!"
     }
  ]
});

<!DOCTYPE html>
<html ng-app="app">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
</head>
<body ng-controller="mainCtrl">
  <ul class="block-elements">
    <li ng-repeat="details in colors">
      <button ng-click="popupBtn()" ng-style="{ color: details.color }">Click Me</button>
    </li>
  </ul>
</body>
</html>

edited Jul 3, 2016 at 20:39

answered Jul 3, 2016 at 20:34

developer033

25k8 gold badges85 silver badges113 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

NewBoy Over a year ago

How do i add multiple styles ng-style ??

developer033 Over a year ago

To add multiple styles, you can either put "inline" (just using a comma to separate them) in tag or create an object. Ex (inline): <button ng-click="popupBtn()" ng-style="{ 'color': details.color, 'margin-left': '35px' }">Click Me</button>.

NewBoy Over a year ago

are the rules slightly different if i am using styles from the JSON file?'color': details.color, 'background-color': details.value

developer033 Over a year ago

What kind of styles are you using?

Collectives™ on Stack Overflow

How to get data from a JSON file using Angular's ng-style

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related