最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - AngularJS + Json: How to render html - Stack Overflow

programmeradmin3浏览0评论

(I know this question was asked many times, but I believe my setup is different and so a new question needed to be asked with a different scenario)

There are plenty of examples out there that shows how to Render HTML, but I can't seem to get this to work with any of the examples. I'd like to render html the {{aboutlongs[0].description}} (this has <br /> tags that I would like to render as html)

Here's the js:

App.controller('aboutLongCtrl', function ($scope, $http) {
    $http.get('test_data/ar_org.json')
        .then(function (res) {
            $scope.aboutlongs = res.data.aboutlong;
        });
});

the HTML:

<div class="background-white p20 reasons" ng-controller="aboutLongCtrl" >
    <h6><b>About {{aboutlongs[0].name}}</b></h6>
    <div class="reason-content" >
       {{aboutlongs[0].description}}
    </div>
</div>

Can anyone point me to the right direction?

The Json file:

"aboutlong": [{
        "name": "Women's March",
        "description": "The rhetoric of the past election cycle has insulted, demonized, and threatened many of us - immigrants of all statuses, Muslims and those of diverse religious faiths, people who identify as LGBTQIA, Native people, Black and Brown people, people with disabilities, survivors of sexual assault - and our munities are hurting and scared. We are confronted with the question of how to move forward in the face of national and international concern and fear.<br /><br />In the spirit of democracy and honoring the champions of human rights, dignity, and justice who have e before us, we join in diversity to show our presence in numbers too great to ignore. The Women's March on Washington will send a bold message to our new government on their first day in office, and to the world that women's rights are human rights. We stand together, recognizing that defending the most marginalized among us is defending all of us.<br /><br />We support the advocacy and resistance movements that reflect our multiple and intersecting identities. We call on all defenders of human rights to join us. This march is the first step towards unifying our munities, grounded in new relationships, to create change from the grassroots level up. We will not rest until women have parity and equity at all levels of leadership in society. We work peacefully while recognizing there is no true peace without justice and equity for all.<br /><br />Women's rights are human rights, regardless of a woman's race, ethnicity, religion, immigration status, sexual identity, gender expression, economic status, age or disability. We practice empathy with the intent to learn about the intersecting identities of each other. We will suspend our first judgement and do our best to lead without ego."
    }]

Posts I've tried:

  • How to render a HTML tag from json value using angularJs

  • Angular.js How to render a HTML tag from json file

  • AngularJS : Insert HTML into view

(I know this question was asked many times, but I believe my setup is different and so a new question needed to be asked with a different scenario)

There are plenty of examples out there that shows how to Render HTML, but I can't seem to get this to work with any of the examples. I'd like to render html the {{aboutlongs[0].description}} (this has <br /> tags that I would like to render as html)

Here's the js:

App.controller('aboutLongCtrl', function ($scope, $http) {
    $http.get('test_data/ar_org.json')
        .then(function (res) {
            $scope.aboutlongs = res.data.aboutlong;
        });
});

the HTML:

<div class="background-white p20 reasons" ng-controller="aboutLongCtrl" >
    <h6><b>About {{aboutlongs[0].name}}</b></h6>
    <div class="reason-content" >
       {{aboutlongs[0].description}}
    </div>
</div>

Can anyone point me to the right direction?

The Json file:

"aboutlong": [{
        "name": "Women's March",
        "description": "The rhetoric of the past election cycle has insulted, demonized, and threatened many of us - immigrants of all statuses, Muslims and those of diverse religious faiths, people who identify as LGBTQIA, Native people, Black and Brown people, people with disabilities, survivors of sexual assault - and our munities are hurting and scared. We are confronted with the question of how to move forward in the face of national and international concern and fear.<br /><br />In the spirit of democracy and honoring the champions of human rights, dignity, and justice who have e before us, we join in diversity to show our presence in numbers too great to ignore. The Women's March on Washington will send a bold message to our new government on their first day in office, and to the world that women's rights are human rights. We stand together, recognizing that defending the most marginalized among us is defending all of us.<br /><br />We support the advocacy and resistance movements that reflect our multiple and intersecting identities. We call on all defenders of human rights to join us. This march is the first step towards unifying our munities, grounded in new relationships, to create change from the grassroots level up. We will not rest until women have parity and equity at all levels of leadership in society. We work peacefully while recognizing there is no true peace without justice and equity for all.<br /><br />Women's rights are human rights, regardless of a woman's race, ethnicity, religion, immigration status, sexual identity, gender expression, economic status, age or disability. We practice empathy with the intent to learn about the intersecting identities of each other. We will suspend our first judgement and do our best to lead without ego."
    }]

Posts I've tried:

  • How to render a HTML tag from json value using angularJs

  • Angular.js How to render a HTML tag from json file

  • AngularJS : Insert HTML into view

Share Improve this question edited May 23, 2017 at 12:17 CommunityBot 11 silver badge asked Apr 10, 2017 at 7:25 sojim2sojim2 1,3172 gold badges18 silver badges47 bronze badges 11
  • What exactly the problem you are facing ? – Aman Commented Apr 10, 2017 at 7:26
  • 1 Try use ng-bind-html – Hadi Commented Apr 10, 2017 at 7:27
  • share your test_data/ar_org.json file data – Sa E Chowdary Commented Apr 10, 2017 at 7:27
  • 1 What exactly have you tried? It's not enough just to say "I've tried these posts" without showing what you've tried. There's no apparent reason why any of the solutions in the other posts wouldn't work. – JJJ Commented Apr 10, 2017 at 7:28
  • 1 @Hjz that would be incorrect, since aboutlongs is an array to access the json data – sojim2 Commented Apr 10, 2017 at 7:31
 |  Show 6 more ments

2 Answers 2

Reset to default 5

if you want to render string to html i remand to use $sce.trustAsHtml(html).

you can create a sample filter like this

.filter('trustHtml',function($sce){
  return function(html){
    return $sce.trustAsHtml(html)
  }
})

call the filter like this inside ng-bind-html

<div class="reason-content" ng-bind-html="aboutlongs[0].description | trustHtml" ></div>

Demo

angular.module("app",[])
.controller("ctrl",function($scope){
$scope.aboutlongs =  [{
        "name": "Women's March",
        "description": "The rhetoric of the past election cycle has insulted, demonized, and threatened many of us - immigrants of all statuses, Muslims and those of diverse religious faiths, people who identify as LGBTQIA, Native people, Black and Brown people, people with disabilities, survivors of sexual assault - and our munities are hurting and scared. We are confronted with the question of how to move forward in the face of national and international concern and fear.<br /><br />In the spirit of democracy and honoring the champions of human rights, dignity, and justice who have e before us, we join in diversity to show our presence in numbers too great to ignore. The Women's March on Washington will send a bold message to our new government on their first day in office, and to the world that women's rights are human rights. We stand together, recognizing that defending the most marginalized among us is defending all of us.<br /><br />We support the advocacy and resistance movements that reflect our multiple and intersecting identities. We call on all defenders of human rights to join us. This march is the first step towards unifying our munities, grounded in new relationships, to create change from the grassroots level up. We will not rest until women have parity and equity at all levels of leadership in society. We work peacefully while recognizing there is no true peace without justice and equity for all.<br /><br />Women's rights are human rights, regardless of a woman's race, ethnicity, religion, immigration status, sexual identity, gender expression, economic status, age or disability. We practice empathy with the intent to learn about the intersecting identities of each other. We will suspend our first judgement and do our best to lead without ego."
    }]
    

})

.filter('trustHtml',function($sce){
  return function(html){
    return $sce.trustAsHtml(html)
  }
})
<script src="https://ajax.googleapis./ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
 <div class="background-white p20 reasons"  >
    <h6><b>About {{aboutlongs[0].name}}</b></h6>
    <div class="reason-content" ng-bind-html="aboutlongs[0].description | trustHtml" >
     
    </div>
</div>
</div>

Have a look at this awesome article Angular Trust Filter

angular.module('myApp', [])
    .controller('aboutLongCtrl', ['$scope', '$sce', function($scope, $sce) {
      $scope.aboutlongs =  [{
        "name": "Women's March",
        "description": $sce.trustAsHtml("The rhetoric of the past election cycle has insulted, demonized, and threatened many of us - immigrants of all statuses, Muslims and those of diverse religious faiths, people who identify as LGBTQIA, Native people, Black and Brown people, people with disabilities, survivors of sexual assault - and our munities are hurting and scared. We are confronted with the question of how to move forward in the face of national and international concern and fear.<br /><br />In the spirit of democracy and honoring the champions of human rights, dignity, and justice who have e before us, we join in diversity to show our presence in numbers too great to ignore. The Women's March on Washington will send a bold message to our new government on their first day in office, and to the world that women's rights are human rights. We stand together, recognizing that defending the most marginalized among us is defending all of us.<br /><br />We support the advocacy and resistance movements that reflect our multiple and intersecting identities. We call on all defenders of human rights to join us. This march is the first step towards unifying our munities, grounded in new relationships, to create change from the grassroots level up. We will not rest until women have parity and equity at all levels of leadership in society. We work peacefully while recognizing there is no true peace without justice and equity for all.<br /><br />Women's rights are human rights, regardless of a woman's race, ethnicity, religion, immigration status, sexual identity, gender expression, economic status, age or disability. We practice empathy with the intent to learn about the intersecting identities of each other. We will suspend our first judgement and do our best to lead without ego.")
    }];
  }])
;
<script src="https://ajax.googleapis./ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" class="background-white p20 reasons" ng-controller="aboutLongCtrl" >
    <h6><b>About {{aboutlongs[0].name}}</b></h6>
    <div class="reason-content" ng-bind-html="aboutlongs[0].description">
    </div>
</div>

发布评论

评论列表(0)

  1. 暂无评论