2016-07-21 3 views
0

Я пытаюсь просто распечатать одиночные объекты JSON в виде строк HTML. Я делаю это в шаблоне ветки; поэтому я изменил значение по умолчанию для Углового значения {{{}]}. Я вижу все JSON, когда я просматриваю приложение в ng-inspector, но я не могу заставить его печатать в HTML.Печать Json как HTML-строка с угловым

Я попытался проверить простой угловой вывод строки, и это, кажется, работает нормально.

JSON файла (отдельный файл из сценария):

{ 
    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" 
     } 
    ] 
} 

Вот приложение:

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

и вот ветка (HTML, только размещение соответствующего материала, но да приложение и блок контроллера закрыт):

<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> 

Любая помощь будет большой; поскольку возможность печатать вещи, используя Angular через JSON, будет критически важной для этой сборки.

+0

JSON.stringify () дает полное представление объекта json. Это то, что вы смотрите? – ArunGeorge

+1

Вы присвоили данные свойству 'blogHeader'' $ scope'. Поэтому в вашем шаблоне каждый раз, когда вы хотите получить доступ к значению из ваших данных, вам нужно начать с 'blogHeader'. Например, в вашем 'h2' вам нужно использовать' blogHeader.children [0] .header.title ' – JAAulde

+0

, у вас нет объекта' children' в '$ scope', у вас есть объект' blogHeader'. try '{[{blogHeader.children [0] .header.title}]}'; или еще лучше, попробуйте использовать 'ng-repeat', если у вас есть несколько элементов в этом массиве' children'. – Claies

ответ

1

Заслуга @JAAulde и @Claies:

Вы назначены данные свойству blogHeader в $ области. Поэтому в вашем шаблоне каждый раз, когда вы хотите получить доступ к значению из ваших данных, вам нужно начать с blogHeader. Например, в вашем h2 вам нужно использовать blogHeader.children [0] .header.title

Смежные вопросы