AngularJS 从 JSON 中提取 <img>答案

【问题标题】：AngularJS extract <img> from JSONAngularJS 从 JSON 中提取 <img>
【发布时间】：2016-05-11 17:32:15
【问题描述】：

在 AngularJS 中解析 JSON 时如何提取某些标签，例如 img？我有一个包含以下数据的 JSON 文件：

jsonFeed({
"title": "My Blog",
"items": [
   {
      "title": "Title1",
      "description": "<p><a href=\"#">Paul<\/a> posted a photo:<\/p><img src=\"https://farm8.staticflickr.com/7365/26872407641_cfbb210ee7_m.jpg\"/>"
   },
   {
      "title": "Title2",
      "description": "<p><a href=\"#">Beth<\/a> posted a photo:<\/p><img src=\"https://farm8.staticflickr.com/7287/26333398074_cfbce73532_m.jpg\"/>"
   }
   ]
 });

我需要在每个帖子的描述中获取该图像：

<article ng-repeat="post in posts">
  <h1>{{ post.title }}</h1>
  <img src=""/>
</article>

有没有办法在 angularjs 中做到这一点，还是使用 jQuery 更好？

【问题讨论】：

使用 substring 和 indexof 方法从描述中获取 img 标签。使用角度 $sanitize 显示 html

标签： javascript jquery angularjs json

【解决方案1】：

~~你可以使用regex:((?:http|https)(?::\\/{2}[\\w]+)(?:[\\/|\\.]?)(?:[^\\s"]*))~~

您可以使用 $sce 来绑定 HTML：https://docs.angularjs.org/api/ngSanitize/service/$sanitize

var app = angular.module("app", []);

app.controller("MainCtrl", ["$scope", "$sce",
    function($scope, $sce) {
        $scope.jsonStr = {
            "title": "My Blog",
            "items": [{
                "title": "Title1",
                "description": "<p><a href=\"#\">Paul<\/a> posted a photo:<\/p><img src=\"https://farm8.staticflickr.com/7365/26872407641_cfbb210ee7_m.jpg\"/>"
            }, {
                "title": "Title2",
                "description": "<p><a href=\"#\">Beth<\/a> posted a photo:<\/p><img src=\"https://farm8.staticflickr.com/7287/26333398074_cfbce73532_m.jpg\"/>"
            }]
        }
        
        $scope.trustHtml = function(desc) {
        	return $sce.trustAsHtml(desc);
        }
        
    }
]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="MainCtrl">
  
  <h1>{{jsonStr.title}}</h1>
  
  <div ng-repeat="post in jsonStr.items">
    <h3>{{post.title}}</h3>
    <div ng-bind-html="trustHtml(post.description)" />
  </div>
  
</div>

【讨论】：

这里我只需要提取标签而不是整个描述，以前版本的答案很有帮助

【解决方案2】：

使用 jqLite，在链接函数中使用 angular.element(post.description)[0].querySelector('img');（如果您使用指令），或者在您可以使用 angular.element 的地方。

【讨论】：

【解决方案3】：

您可以使用带有负值的 $limitTo 过滤器来获取标签，然后使用 $sanitize 将其呈现为 html。

阅读下一个文档： https://docs.angularjs.org/api/ng/filter/limitTo

https://docs.angularjs.org/api/ngSanitize/service/$sanitize

【讨论】：

【解决方案4】：

AngularJS自带jqLite，调用angular.element()

obj['items'].forEach(function(val, i){
  var elm = angular.element(val['description'])[1].src;
  console.log(elm);
});

【讨论】：

【解决方案5】：

我会怎么做：

循环遍历每个项目
使用正则表达式获取img url（例如\<img src=\\\"(.+)\\\"）
将图片网址（本例中为imgUrl）添加到每个项目。

然后在你的 html 中像这样使用它：

<article ng-repeat="post in posts">
    <h1>{{ post.title }}</h1>
    <img ng-src="{{ post.imgUrl }}"/>
</article>

注意事项

我用的是ng-src，不是src
正则表达式只是一个快速示例

【讨论】：