Question

我有JSON数据，其中也有一些HTML标记。当我试图在浏览器中显示数据时，它也会打印HTML标签，而不会将它们转换为它们应该显示的内容。请参阅下面的代码。

我的JSON数据（ibmndata.php我正在将PHP数据转换为JSON）：

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

My Angular数据

模型（这里我包含'ngSanitize'包，正如我在其他一些例子中找到的那样）

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

控制器

app.controller('ibmnController', ['$scope', '$http', function($scope, $http)
{
    $http.get('ibmndata.php').success(function(data)
    {
        $scope.ibmnlist = data;
    });
}]);

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

这是一名工作人员：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>

奖励：您使用success代表$http被拒绝，请改用then：

官方文档：

//简单的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.

 });

解码要在AngularJs

1 个答案: