2016-07-21 9 views
0

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.

+0

JSON.stringify () gibt eine vollständige Darstellung des JSON-Objekts. Siehst du das an? – ArunGeorge

+1

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

+0

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

Antwort

1

Kredit geht an @JAAulde und @Claies:

Sie die Daten an die blogHeader Eigenschaft $ Bereich zugewiesen. Wenn Sie also in Ihrer Vorlage auf einen Wert innerhalb Ihrer Daten zugreifen möchten, müssen Sie bei blogHeader starten. Zum Beispiel müssen Sie in Ihrem h2 blogHeader.children [0] verwenden. Header.title