Ich versuche, einzelne JSON-Objekte einfach als HTML-Strings zu drucken. Ich mache das in einer Zweigvorlage; Deshalb habe ich die Standardausgabe von Angulars auf {[{}]} geändert. Ich sehe alle JSON-Dateien, wenn ich die App im ng-Inspector anschaue, aber ich kann nicht erreichen, dass sie in HTML gedruckt wird.Json als HTML-String mit Angular drucken
Ich habe versucht, eine einfache eckige String-Ausgabe zu testen und das scheint gut zu funktionieren.
JSON-Datei (separate Datei aus Skript):
{
header: {
title: "Insights",
slug: "insights",
content: {
items: "@self.children"
}
},
content: "",
children: [
{
header: {
title: "item test",
taxonomy: {
category: [
"blog"
],
tag: [
"test"
]
}
},
content: "This is a test"
}
]
}
ist die App:
var blogJson = "http://localhost:8888/sean/insights?return-as=json";//cache json url
var blogCat = angular.module('blogCategories', []).config(function($interpolateProvider){
$interpolateProvider.startSymbol('{[{').endSymbol('}]}');
});//cache app
//master controller
blogCat.controller('blogFilters', function($scope, $http) {
$http.get(blogJson).success(function(data) {
$scope.blogHeader = data;
});
});
und hier ist der Zweig (html, nur die relevanten Sachen veröffentlichen, aber ja die App und Controller-Block ist geschlossen):
<div class="blog_app_wrap" ng-app="blogCategories" ng-controller="blogFilters">
<section class="blog_header">
<div class="header_text_wrap">
<div class="blog_title">
<h1>Latest Mortgage Insight</h1>
<div class="underline_center"></div>
</div>
<div class="header_text">
<h2>{[{children[0].header.title}]}</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<a class="small_button" href="javascript:void(0)">Read Full Article</a>
</div>
</div>
Jede Hilfe wäre toll; Die Fähigkeit, mit Angular via JSON zu drucken, wird für diesen Build von entscheidender Bedeutung sein.
JSON.stringify () gibt eine vollständige Darstellung des JSON-Objekts. Siehst du das an? –
ArunGeorge
Sie haben die Daten der 'blogHeader' -Eigenschaft von' $ scope' zugewiesen. Wenn Sie also in Ihrer Vorlage auf einen Wert innerhalb Ihrer Daten zugreifen möchten, müssen Sie bei 'blogHeader' beginnen. Zum Beispiel müssen Sie in Ihrem 'h2'' blogHeader.children [0] .header.title ' – JAAulde
verwenden, Sie haben kein' children' Objekt auf '$ scope', Sie haben ein' blogHeader' Objekt. probiere '{{blogHeader.children [0] .header.title}]}'; Oder besser: Versuchen Sie es mit 'ng-repeat', wenn Sie mehrere Elemente in diesem 'children' Array haben. – Claies