AngularJS extract <img> from JSON

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

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

Answer 2

您可以使用$ limitTo過濾器以獲取標記的負值，然後使用$ sanitize將其呈現爲html。

閱讀下一文檔： https://docs.angularjs.org/api/ng/filter/limitTo

https://docs.angularjs.org/api/ngSanitize/service/ $消毒

Answer 3

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

您可以使用$ SCE的HTML綁定：https://docs.angularjs.org/api/ngSanitize/service/ $消毒

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) { 
 
     \t 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 4

AngularJS自帶jqLit​​e，調用angular.element()

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

Answer 5

我會怎麼做：

• 遍歷每個項目
• 使用正則表達式來獲得圖像網址（例如\<img src=\\\"(.+)\\\"）
• 將圖像網址（本例中爲imgUrl）添加到每個項目。

然後在你的HTML中使用這樣的：

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

注

• 我用ng-src，不SRC
• 正則表達式僅僅是一個快速出樣