ng-repeatでJSONからHTMLを解析する

Tomek Buszewski

私は今日AngularJSを学び始め、今のところ順調に進んでいます。しかし、問題が発生し、答えが見つからないようです。私がやろうとしているのは<p>Text</p>、フォーマットされたとおりにhtml文字列を出力することですTextこれまでのところ、Angularはそれをプレーンとして印刷し<p>Text</p>ます。

私のコードは次のとおりです。

JS

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

blogApp.controller('blogPostsCtrl', function($scope, $http) {
    $http.get('wp-json/posts').success(function(data) {
        $scope.posts = data;
        $scope.postsLoaded = 'visible-lg';
    });
});

HTML

<article id="post-{{post.ID}}" <?php post_class(); ?> itemscope itemprop="blogPost" itemtype="http://schema.org/BlogPosting" ng-repeat="post in posts" ng-class="postsLoaded">

    <h2 class="entry-title" itemprop="headline"><a title="Link do {{post.title}}" rel="bookmark" href="{{post.link}}">{{post.title}}</a></h2>

    <div class="entry-content">
        <img ng-src="{{post.featured_image.source}}">
        {{post.content}}
    </div>
    <footer class="entry-footer">
        <ul class="categories"><li ng-repeat="category in post.terms.category"><a href="{{category.link}}">{{category.name}}</a></li></ul>
    </footer>
</article>

私の問題は{{post.content}}です。試してみたかったのng-bind-unsafeですが、削除されました。私も試しましたng-bind-html="post.content"が、うまくいきませんでした。

私はAngular1.4を使用しています。

アンディ・ガスケル

あなたが探しているngBindHtmlたとえば、コンテンツでは次のように使用します。

<div ng-bind-html="post.content"></div>

式を評価し、結果のHTMLを安全な方法で要素に挿入します。デフォルトでは、結果のHTMLコンテンツは$ sanitizeサービスを使用してサニタイズされます。この機能を利用するには、たとえば、モジュールの依存関係(コアAngularではない)にngSanitizeを含めることにより、$ sanitizeが使用可能であることを確認します。モジュールの依存関係でngSanitizeを使用するには、アプリケーションに「angular-sanitize.js」を含める必要があります。

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

応答からのHTMLをng-repeatでHTMLとして表示する方法

分類Dev

ng-repeatでHTMLを印刷する

分類Dev

Angularでng-repeatから入力値を取得する方法

分類Dev

ng-repeatを使用しながらHTMLでAngular変数を設定する

分類Dev

ng-repeatで使用するための.NETWebmethodからのJSONの取得

分類Dev

複雑なjson形式でng-repeatを使用することは可能ですか?

分類Dev

ng-repeatを使用して、それほど多くのhtml要素を解析するのではなく印刷する

分類Dev

ng-repeatから一時変数を認識しない関数を使用するng-bind-html

分類Dev

javascriptのng-repeatから動的ng-modelを取得するにはどうすればよいですか?

分類Dev

ng-repeatでFirebaseから逆の順序でアイテムを表示する

分類Dev

ng-repeatでFirebaseから逆の順序でアイテムを表示する

分類Dev

いくつかの条件でng-repeatを使用してJSONを表示する

分類Dev

別のng-repeat内でng-repeatを使用する

分類Dev

ディレクティブからng-repeatで属性値を取得する

分類Dev

ng-repeatからangularjsでID値を割り当てる方法

分類Dev

jsonを含む文字列でng-repeatを使用する

分類Dev

ng-repeatスコープからの引数を使用してng-repeatと同じタグでng-clickを使用する

分類Dev

ng-repeat入力からng-model値を取得します

分類Dev

ng-repeatから選択した値を取得する方法

分類Dev

html要素なしでng-repeatを使用する方法

分類Dev

ng-repeatでhtmlタグを削除/追加する方法

分類Dev

Angularjs-ng-repeatで大量のhtmlを管理する

分類Dev

JadeでHTMLを出力する(ng-repeat内)

分類Dev

深いネストのjsonでng-repeatを使用する

分類Dev

jsonオブジェクトでng-repeatを使用する

分類Dev

AngularJsでNg-repeatを更新する方法

分類Dev

ng-repeatで行数を制限する

分類Dev

ng-repeatで日付を比較する

分類Dev

ng-repeatをangularjsで使用する方法

Related 関連記事

  1. 1

    応答からのHTMLをng-repeatでHTMLとして表示する方法

  2. 2

    ng-repeatでHTMLを印刷する

  3. 3

    Angularでng-repeatから入力値を取得する方法

  4. 4

    ng-repeatを使用しながらHTMLでAngular変数を設定する

  5. 5

    ng-repeatで使用するための.NETWebmethodからのJSONの取得

  6. 6

    複雑なjson形式でng-repeatを使用することは可能ですか?

  7. 7

    ng-repeatを使用して、それほど多くのhtml要素を解析するのではなく印刷する

  8. 8

    ng-repeatから一時変数を認識しない関数を使用するng-bind-html

  9. 9

    javascriptのng-repeatから動的ng-modelを取得するにはどうすればよいですか?

  10. 10

    ng-repeatでFirebaseから逆の順序でアイテムを表示する

  11. 11

    ng-repeatでFirebaseから逆の順序でアイテムを表示する

  12. 12

    いくつかの条件でng-repeatを使用してJSONを表示する

  13. 13

    別のng-repeat内でng-repeatを使用する

  14. 14

    ディレクティブからng-repeatで属性値を取得する

  15. 15

    ng-repeatからangularjsでID値を割り当てる方法

  16. 16

    jsonを含む文字列でng-repeatを使用する

  17. 17

    ng-repeatスコープからの引数を使用してng-repeatと同じタグでng-clickを使用する

  18. 18

    ng-repeat入力からng-model値を取得します

  19. 19

    ng-repeatから選択した値を取得する方法

  20. 20

    html要素なしでng-repeatを使用する方法

  21. 21

    ng-repeatでhtmlタグを削除/追加する方法

  22. 22

    Angularjs-ng-repeatで大量のhtmlを管理する

  23. 23

    JadeでHTMLを出力する(ng-repeat内)

  24. 24

    深いネストのjsonでng-repeatを使用する

  25. 25

    jsonオブジェクトでng-repeatを使用する

  26. 26

    AngularJsでNg-repeatを更新する方法

  27. 27

    ng-repeatで行数を制限する

  28. 28

    ng-repeatで日付を比較する

  29. 29

    ng-repeatをangularjsで使用する方法

ホットタグ

アーカイブ