AngularJsで表示するJSON HTMLデータをデコード

Question

JSONデータにはいくつかのHTMLタグもあります。私はブラウザにそのデータを表示しようとしているときに、HTMLタグをそのまま表示します。以下の私のコードを見てください。

私のJSONデータ

（私はJSONへのPHPのデータを変換していますibmndata.php）：

[ 
    { 
    "title": "<span class='data'>Lectures</span>", 
    "content" : "lectures.jpg" 
     }, 
     { 
    "title": "<span class='data'>Case Study Analysis</span>", 
    "content" : "case-study.jpg" 
     }, 
     { 
    "title": "<span class='data'>Industry Analysis Projects</span>", 
    "content" : "industry-a.jpg" 
     },{ 
    "title": "<span class='data'>Summer Internship Projects</span>", 
    "content" : "summer-internship.jpg" 
     } 
] 

マイ角度データ

モデル（ここで私はいくつかに見られるような、私は 'ngSanitize' パッケージに含まれています他の例）

var app = angular.module('ibmnApp', ['ngAnimate', 'ngRoute', 'ngSanitize', 'ui.bootstrap']); 

コントローラ

​​3210

HTML部分

<div class="col-md-9" ng-controller="ibmnController"> 
    <div class="col-md-9" ng-repeat="item in ibmnlist"> 
     <p>{{item.title}}</p> 
     <p ng-bind-html="item">{{item.content}}</p> 
    </div> 
</div> 

私は、ウェブ上で同様の問題を発見したが、その解決策は、私のために働いていません。私のコードで何が問題になるのか、AngularJsでこれを行う方法を教えてください。ありがとう。

Answer 1

これは作業plunkerです：http://plnkr.co/edit/fZ5LnxMv5Ngnzyv6fsz2?p=preview

あなたが "安全でない" フィルタを追加する必要があります。

angular.module('myApp').filter('unsafe', function ($sce) { 
    return function (val) { 
     if((typeof val == 'string' || val instanceof String)) { 
     return $sce.trustAsHtml(val); 
     } 
    }; 
}); 

とビューで：

<div ng-controller="ibmnController"> 
    <div ng-repeat="item in ibmnlist"> 

     <p ng-bind-html="item.title | unsafe "></p> 
     <p>{{item.content}}</p> 
    </div> 
</div> 

---

ボーナスを：あなた減価償却されている$httpにはsuccessを使用しています。代わり：

公式ドキュメント：

//シンプルなGETリクエストの例は：

$http({ 

method: 'GET', 

url: '/someUrl' 

}).then(function successCallback(response) { 

    // this callback will be called asynchronously 

    // when the response is available 

}, function errorCallback(response) { 

    // called asynchronously if an error occurs 

    // or server returns response with an error status. 

});