So erhalten Sie Daten aus einer JSON-Datei mit Angulars ng-style

Ich versuche, Elemente basierend auf den in meiner JSON-Datei markierten Attributen zu stylen. Ich bin derzeit ng-style Eigenschaften aufrufen innerhalb der JSONSo erhalten Sie Daten aus einer JSON-Datei mit Angulars ng-style

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

Objekte

Das obige Beispiel scheint nicht

zu Targeting-Styling die Knoten auf meinem DOM tun in Bezug auf sein

jede Weiß, wie dieses Problem zu beheben Problem.

{ 
"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; 
    });

Quelle

2016-07-03 NewBoy

Hallo 1. Liest du die Datei in einem Controller? 2. Verwenden Sie ng-style, keine Notwendigkeit für ng-attr-style –

es sollte {{details.value} anstelle von {{colors.value}} sein –

@RamTobolski ich benutzte ng-style in der ersten und es immer noch nicht ' t Arbeit – NewBoy

Hier ist ein Ausschnitt Arbeits:

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>

Quelle

2016-07-03 20:34:10 developer033

Wie füge ich mehrere Stile ng-style hinzu ?? – NewBoy

Um mehrere Stile hinzuzufügen, können Sie entweder "inline" (einfach mit einem Komma trennen) in das Tag einfügen oder ein Objekt erstellen. Ex (inline): ''. – developer033

sind die Regeln etwas anders, wenn ich Stile aus der JSON-Datei verwende? 'Color': details.color, 'background-color': details.value – NewBoy

So erhalten Sie Daten aus einer JSON-Datei mit Angulars ng-style

Antwort

Verwandte Themen