Question

我是AngularJs的初学者，这是我的第一次尝试

我正在尝试从json链接显示数据，而某些字段包含html

以下是json内容：

[{"titre":"Titre18","description":"<p>test<\/p>"},{"titre":"Titre18f","description":"<p>sdfsdfsd<\/p>"}]

我使用此angularJs代码显示数据

<div ng-app="myApp" ng-controller="customersCtrl"> 

<ul>
  <li ng-repeat="x in names">
    {{x.titre}}
    {{x.description}}
  </li>
</ul>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
  $http.get("JSONLINK")
  .success(function (response) {$scope.names = response;});
});
</script>

问题是，字段描述显示在json中：

 - Titre18 <p>test</p> 
 - Titre18f <p>sdfsdfsd</p>

是否可以将此字段格式化为html？ 我希望将p标记解释为html

我使用angularJs 1.3.15

非常感谢

Answer 1

试试这个：

<ul>
  <li ng-repeat="x in names" ng-bind-html="x.description">
    {{x.titre}}
    {{x.description}}
  </li>
</ul>

现在请注意，ng-bind-html会在＆＃39;描述＆＃39;中评估HTML。内容并安全地呈现它，如果你想绕过Angular的清理方法，还有ng-bind-html-unsafe。但是在使用它们时要小心，考虑到错误的＆＃39;＆gt;＆＃39;符号可以打破整个页面。

您还需要在模块上添加ngSanitize依赖项。

angular.module('yourmodule', ['ngSanitize']);

需要angular-sanitize.js docs：https://docs.angularjs.org/api/ngSanitize

这是bind-html的文档 https://docs.angularjs.org/api/ng/directive/ngBindHtml

Answer 2

这里是plunker的代码链接。a link！

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-example62-production</title>


  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.6/angular.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.6/angular-sanitize.js"></script>
  <script src="script.js"></script>



</head>
<body ng-app="bindHtmlExample" >
  <div ng-controller="ExampleController">
 <ul>
  <li ng-repeat="x in names" ng-bind-html="x.description">
    {{x.titre}}
    {{x.description}}
  </li>
</ul>
</div>
</body>
</html>

在script.js中

(function(angular) {
  'use strict';
angular.module('bindHtmlExample', ['ngSanitize'])
  .controller('ExampleController', ['$scope', function($scope) {
    $scope.names =[{"titre":"Titre18","description":"<p>test<\/p>"},{"titre":"Titre18f","description":"<p>sdfsdfsd<\/p>"}];
  }]);
})(window.angular);

在这里你会看到p标签被解释为html而不是string.Hope这将帮助你

Answer 3

如果我理解正确，您想要删除描述文本周围的

标签。请看这个链接：angularjs to output plain text instead of html

从json格式化html

3 个答案: