Question

如何在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更好？

Answer 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>

Answer 2

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

Answer 3

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

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

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

Answer 4

AngularJS附带jqLite，使用java -jar ...

调用

angular.element()

Answer 5

我该怎么做：

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

然后在你的html中使用它：

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

备注

我使用ng-src，而不是src
正则表达式只是一个快速的样本

AngularJS从JSON中提取<img/>

5 个答案: