AngularJS + Json:如何渲染 html

2023-12-10

(我知道这个问题被问了很多次,但我相信我的设置不同,因此需要在不同的场景中提出一个新问题)

有很多示例展示了如何渲染 HTML,但我似乎无法使其与任何示例一起使用。我想渲染 html{{aboutlongs[0].description}}(这有<br />我想渲染为 html 的标签)

这是js:

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

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>

有人能指出我正确的方向吗?

Json 文件:

"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 communities 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 come 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 communities, 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."
    }]

我尝试过的帖子:

  • 如何使用 angularJs 从 json 值渲染 HTML 标签

  • Angular.js 如何从 json 文件渲染 HTML 标签

  • AngularJS:将 HTML 插入视图


如果你想将字符串渲染为 html 我建议使用$sce.trustAsHtml(html).

你可以像这样创建一个示例过滤器

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

在里面这样调用过滤器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 communities 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 come 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 communities, 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.com/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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

AngularJS + Json:如何渲染 html 的相关文章

随机推荐

  • 使用 React Native iOS Release Build 不会加载新代码,但版本会加载

    我的React Native应用程序不响应我在iOS发布模式下对代码的更改 我不知道为什么 但我无法上传包含更改的新版本 但是 当我在代码中应用更改时 版本更改是唯一更改的内容 我能做什么来修复它 无论我是从 XCode 还是使用代码片段构
  • 为seaborn 热图指定特定颜色

    我正在尝试使用 seaborn 制作热图 但无法更改特定值的颜色 假设值 0 应为白色 值 1 应为灰色 然后使用 cmap 提供的调色板 尝试使用面膜 但感到困惑 import matplotlib pyplot as plt impor
  • C# 在面板中绘制圆圈

    我正在做一个关于数学 阿波罗尼乌斯问题 的程序 但首先我的程序需要能够允许用户在面板上绘制三个圆圈 这些圆圈的大小和位置可以不同 我不知道如何允许用户在面板上绘制他们的尺寸圆圈 任何帮助将不胜感激 这是 Windows 窗体的简单演示 us
  • iOS 上的预计电池使用时间[重复]

    这个问题在这里已经有答案了 可能的重复 iPhone 计算电池寿命 我在应用商店中看到许多应用程序提供了不同使用模式 待机 音频和视频播放 Wi Fi 和 3G 浏览器使用 通话时间 的估计电池工作时间 我有类似的要求来计算这样的估计时间
  • C# 读取word文档

    我想阅读服务器中的word文档 doc和docx 服务器没有 安装了office 因此我不能使用com对象 也不能使用商业软件 有没有办法让我单独使用office工具 阅读word docs 2003年和2007年 不幸的是 没有很好的免费
  • SwiftUI - ForEach 删除转换始终仅应用于最后一项

    我正在尝试向我的动画添加删除动画ForEach 使得每个Card当移除时 其内部会扩展 这是我到目前为止所拥有的 问题是无论哪一个Card被按下 它是总是最后一个动画 有时 每张卡片内的文本都有奇怪的滑动 变形动画 这是我的代码 Ran i
  • 奇怪的“406 不可接受”错误

    当我尝试通过 Javascript 执行此操作时 我得到一个406 Not Acceptable error def show annotation Annotation find by id params id respond to do
  • 将(大量)零写入二进制文件

    这可能是一个愚蠢的问题 但我无法找到正确的答案 我想存储 不要问为什么 a 的二进制表示 2000 2000 2000 零数组写入磁盘 二进制格式 实现这一目标的传统方法是 with open myfile wb as f f write
  • 如何创建新的窗口按钮 PySide/PyQt?

    我在使用 Python 2 7 的 PyQt4 PySide 中使用 新窗口 功能时遇到问题 我连接了一个initNewWindow 函数 创建一个新窗口 一个操作并将其放入菜单栏中 曾经是桌面软件中的常见功能 新窗口不会弹出并关闭 而是会
  • Xcode 6 Interface Builder“无法打开编译的 nibs”错误,FiksuSDK

    我有一个使用 CocoaPods 在 Xcode 5 中运行良好的应用程序 当我在 Xcode 6 上打开应用程序并点击构建并运行时 我从 FiksuSDK 收到四个关于编译 nib 文件的错误 在侧面 它指出我没有查看它的权限 但点击它会
  • 选择栏被隐藏

    我已经添加了adjustPan in Manifest xml这里的文件是我的Activity tag in Manifest xml android name LoginActivity android configChanges ori
  • 典型的 IoC 容器用法 - 向下传递数据

    我最近开始使用IoC第一次使用容器 但我没有接受过使用它的最佳实践的教育 更具体地说我正在使用Unity在一个 C NET 项目中 我开始使用它 因为它附带Prism 我使用容器来解析 顶级 对象 并且它们根据容器获得注入的正确对象 但是
  • C# 通过拖动绘制线条

    如何像windows画图那样画一条线 单击固定第一个点 第二个点 和线 随鼠标移动 再单击固定线 int x 0 y 0 protected override void OnMouseMove MouseEventArgs e base O
  • 两个日期之间的 Pythonic 差异(以年为单位)?

    下面有更有效的方法吗 我希望将两个日期之间的年份差异作为单个标量 欢迎任何建议 from datetime import datetime start date datetime 2010 4 28 12 33 end date datet
  • 你如何知道 jQuery 函数何时返回 false?

    return false 似乎工作在submitHandler但我不知道为什么 function submitHandler post this attr action this serialize null script return f
  • iOS 8 Swift 音频播放完成时执行方法

    我正在 iOS 8 的 Swift 中播放音频文件 我需要知道声音何时结束 如何在声音结束时执行一个方法 这取决于你如何玩它 查找其状态更改可以触发 KVO 通知的委托方法 通知或可观察属性 例如 如果您使用 AVAudioPlayer 它
  • 如何为 Npgsql 提供自定义数据类型作为参数?

    我想使用 Npgsql 将键值对数组作为参数传递给 PostgreSQL 函数 我定义了以下类型 drop type if exists key value pair create type key value pair as k varc
  • 如何使用复选框列和绑定从 Xceed\Extended WPF Toolkit 设置数据网格控件

    我正在尝试将 WPF 数据网格替换为 xceed Extended WPF Toolkit DataGridControl 我需要对复选框列中的单击事件做出反应 以总结许多其他列 在现有的数据网格中 我有一个复选框列 它绑定到一个可观察集合
  • 无法使 (UTF-8) 繁体中文字符在 PHP gettext 扩展中工作(在 poEdit 中创建的 .po 和 .mo 文件)

    我检查了MSDN语言环境字符串是 zh Hant 但我也尝试使用 zh TW 中文 台湾 繁体中文字符在 poEditor 中看起来不错 但是当我在浏览器中打开文件时 这些字符只是奇怪的符号 o 我认为翻译是有效的 但编码有问题 我对字符集
  • AngularJS + Json:如何渲染 html

    我知道这个问题被问了很多次 但我相信我的设置不同 因此需要在不同的场景中提出一个新问题 有很多示例展示了如何渲染 HTML 但我似乎无法使其与任何示例一起使用 我想渲染 html aboutlongs 0 description 这有 br