gpt4 book ai didi

javascript - AngularJS ng-重复显示html

转载 作者:行者123 更新时间:2023-12-02 16:24:36 25 4
gpt4 key购买 nike

我有简单的 ng-repeat:

<section id="content" class="container" ng-app="myApp" ng-controller="postsController">
<div class="row">

<div class="col s12 xl6" ng-repeat="post in posts | filter:searchText" on-finish-render="done">
<div class="card">
<div class="card-image">
<img ng-src="{{post.Thumbnail}}" alt="image">
<span class="card-title">{{post.Title}}</span>
</div>
<div class="card-content">
<p>{{post.Excerpt}}</p>
</div>
</div>
</div>

</div>
</section>

Angular 代码:

var myApp = angular.module('myApp',[]);

myApp.controller('postsController',['$scope', '$http', function ($scope, $http) {
$http.get("api/db.php").
success(function(response) {
console.log(response); //For testing
$scope.posts = response;
console.log("Connected to MySQL server.");
$scope.$on('done', function(ngRepeatFinishedEvent) {
console.log("All content has been loaded :)");
$('.modal-trigger').leanModal();
});
});
}]);

myApp.directive('onFinishRender', function ($timeout) {
return {
restrict: 'A',
link: function (scope, element, attr) {
if (scope.$last === true) {
$timeout(function () {
scope.$emit(attr.onFinishRender);
});
}
}
}
});

现在的问题是{{post.Excerpt}},它以 HTML 格式保存在我的数据库中。它有效,但我已经在文本中得到了它(就像在 a 中一样)。那么我的问题是如何用html显示它?

我读过一些关于 ng-bind-html-unsafe 的内容,但很多人说这不起作用。有什么建议吗?

Grettings,W

最佳答案

你可以为它制作一个过滤器。

过滤器:

myApp.filter('ashtml', function($sce) { return $sce.trustAsHtml; });

查看

<div ng-bind-html="post.Excerpt | ashtml"></div>

工作演示:

     angular.module('myapp', [])
.controller('HelloWorldCtrl', function($scope){
$scope.helloMessage = "Hello A.B";
$scope.post = {};
$scope.post.Excerpt = '<p>hello html</p>';
})
.filter('ashtml', function($sce) { return $sce.trustAsHtml; })
;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app="myapp">
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body ng-controller="HelloWorldCtrl">
<h1 >{{helloMessage}}</h1>
<div ng-bind-html="post.Excerpt | ashtml"></div>




</body>
</html>

关于javascript - AngularJS ng-重复显示html,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28797621/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com