Question

我已经获取了json数据，看起来像这样：

 {
     "id": "154",
     "user_id": "1445674241",
     "title": "Power of one",
     "content": "<p><img style=\"display: block; margin-left: auto; margin-right: auto;\" src=\"/photo.png\" alt=\"Power of one\" width=\"455\" height=\"567\" /></p>\n<p>&nbsp;</p>\n<p>One is really powerful, you are one, God is one, earth is one. Love the one.<img style=\"display: block; margin-left: auto; margin-right: auto;\" src=\"/photo.png\" alt=\"Power of one\" width=\"455\" height=\"567\" /></p>",
     "num_views": "0",
     "votes_up": "1",
 }

我想使用角度js更改所有img标签的属性（例如追加src，更改高度和宽度）。

我也在我的控制器中使用ng-bind-html呈现html代码。其功能是：

 $scope.renderHtml = function (html_code) {
    return $sce.trustAsHtml(html_code);
};

帮我改变img标签的属性。

Answer 1

我认为你必须直接在data.content字符串......左右工作像这样：

var newWidth = 123;
data.content = data.content.replace(/(img.*?width=")(.*?)(")/g, function(c1, c2, c3) { return c1 + newWidth + c3; });

Answer 2

您可以为此创建一些自定义过滤器，例如我从我的数据输入中获取youtube链接，并且我想在嵌入我的页面之前修改它 -

myApp.filter('trustedURL', ['$sce', function($sce){
    return function(input) {
        return $sce.trustAsResourceUrl(input);
    };
}]);

myApp.filter('youtubeEmb', ['$sce', function($sce){
    return function(input) {
        var shortYou = input.match(/youtu.be/g);
        if(shortYou){
            return input.substring(0,input.indexOf('?')).replace(shortYou,"youtube.com/embed");
        }else{
            return input.substring(0,input.indexOf('&')).replace("watch?v=","embed/");
        }
    };
}]);

我的HTML -

<iframe src="data.uri | trustedURL | youtubeEmb"></iframe>

这里是url，类似地你可以为img tag attrs创建一些函数。

使用Angularjs更改获取的json数据

2 个答案: