使用ng-bind将值追加到转换标记
ng-bind是AngularJS框架中的一个指令，用于将数据绑定到HTML标签中。它可以实现在页面中动态显示数据的功能。
具体来说，ng-bind用于将AngularJS控制器中定义的变量值追加到指定的HTML标签内。在页面渲染时，ng-bind会将变量值替换为实际的数据，并显示在对应的标签位置上。
ng-bind的语法如下：
<div ng-bind="变量名"></div>其中，变量名是在AngularJS控制器中定义的变量。
ng-bind的优势：
- 数据绑定：ng-bind通过数据绑定的方式将变量值动态地显示在页面上，实现了前端页面和后端数据的实时同步。
- 安全性：ng-bind会将数据进行安全过滤，避免了在页面中直接使用插值表达式可能引发的跨站脚本攻击（XSS）问题。
ng-bind的应用场景：
- 在表单中显示数据：可以将后端返回的数据绑定到HTML标签中，用于显示表单数据，方便用户查看和修改。
- 动态展示数据：可以将控制器中的变量值动态地绑定到HTML标签中，实现实时更新显示效果，提升用户体验。
腾讯云相关产品推荐： 腾讯云提供了一系列的云计算产品，以下是一些与ng-bind使用相关的产品：
- 腾讯云云服务器（CVM）：提供了可弹性调整的云服务器，用于部署和运行应用程序。 产品介绍链接：https://cloud.tencent.com/product/cvm
- 腾讯云云数据库 MySQL版（TencentDB for MySQL）：提供高可用、可扩展的MySQL数据库服务，用于存储数据。 产品介绍链接：https://cloud.tencent.com/product/cdb_for_mysql
以上是对使用ng-bind将值追加到转换标记的完善和全面的答案。
相关·内容
3回答
在角使用ng-绑定在类中
、、、
我可以用角度写下一篇：
class="{{ DayTypesClasses[request.typeId] }}"
，它将根据表达式值设置css-class。
但是我发现ng-bind可以做同样的事情，但也为这个绑定节省了一些时间。
我试过在课堂上使用ng-bind，但它行不通。
class="ng-bind : 'DayTypesClasses[request.typeId]'"
class="ng-bind = 'DayTypesClasses[request.typeId]'"
class="ng-b
浏览 0提问于2016-04-14得票数 2
回答已采纳
1回答
我需要帮助。我有一个项目，我需要动态复制html节点。这些节点的ng-bind和ng-model属性如下：
<input class="quest_model" type="text" data-ng-model="quest">
<span ng-bind="quest" class="quest_bind"></span>
我可以用Jquery修改这个属性，如下所示：
quest.find("span.quest_bind").attr("ng-bin
浏览 6提问于2015-09-26得票数 2
我有一个用例，我们可以在字符串中包含'&‘和'>’字符。例如：强生，value > 3。因此，当来自服务器的响应被编码时，值就变成了'value > 3‘。
ng-bind不支持以下内容：
将为ngBind呈现value > 3，而浏览器呈现与value > 3相同的内容。
Ng:bind <div ng-bind="model"></div>
Ng:bind-html <div ng-bind-html="model"></div>
<
浏览 3提问于2013-10-09得票数 18
我使用的是Angularjs 1.5。
创建了一个服务来处理元数据和页面标题。试着去应用它。
问题是-出于某种原因，如果我直接在<head>标记上定义一个控制器：
<head ng-controller="headMetaController">
控制器根本不会被加载，但是如果我用<head>将它包装在额外的<div>中
<head>
<div ng-controller="headMetaController">
<title ng-bind="seoMetaServ
浏览 1提问于2017-04-06得票数 0
1回答
我尝试在指令中使用多ng-bind而不是{{}}，但没有成功。
<my-directive att1="age" att2="22"></my-directive>
angular
.module("app",[])
.directive('myDirective', myDirective);
function myDirective() {
return {
restrict: 'E',
scope: {
浏览 28提问于2015-06-16得票数 0
如果字符串包含"http://“in it，ex json response：
var res = {status: "ok",activities: [{content: "The icon Canadian. Credit: http://allrecipes.co..."},{content: "The test message"},{content: "The Canadian art http://allrecipes.co"}]}
$scope.posts = res.activities;
但是，我需要显示
浏览 1提问于2017-05-02得票数 0
我正在努力学习一些关于AngularJS的知识。所以我把一个JSON分解成一个我用Angular创建的表。我为这个表编写了几个CSS类，使它更好一些。当我运行它时，我发现了一些非常令人震惊的事情，我可以在我的浏览器中看到我的表被更改了，并自动被赋予了一个名为"ng-binding“的类。
我不能真正控制我的桌子风格，它是非常奇怪的！
有没有其他人遇到过这种情况，并可以建议我如何更改/取消它，以做一些事情，以便我可以重新获得对角度对象的样式控制？
谢谢
<html>
<script src="http://ajax.googleapis.com/ajax/l
浏览 1提问于2016-06-15得票数 1
我正在寻找一种方法来为下列需求建立一个扩展：
应该根据传递的属性值删除元素。
在呈现之前应该移除
应该删除所有子元素。
在视觉上应该像ng-if和ng-bind一样工作
或者用另一种方式说:元素应该在初始页面加载之后和元素呈现之前被删除，这样用户就不会看到元素“闪烁”。有没有一种不用ng-bind的方法？
ng-bind并不总是很有用：
<parent my-directive>
<child ng-bind="Hi"></child>
</parent>
.parent {
backg
浏览 2提问于2015-11-18得票数 0
回答已采纳
如何在删除标记时调用函数？我尝试了各种方法来做到这一点，但没有一个有效。有没有人能提个建议。
<tags-input ng-model="vm.studentObj.assigned_employees" display-property="name" >
</tags-input>
<p ng-bind="employee"></p>
浏览 1提问于2017-02-03得票数 0
我在angularjs中使用过ng-bind，如下所示
<div ng-bind="getVal()"></div>
其中getVal()返回一些值，它在控制器中。但是在Angular2中，我在组件中有一个函数getVal()，我需要像angular1一样从模板中调用它。
我试过了
<div [(ngModel)]="getVal()"></div>
但不走运，你知道吗？
浏览 3提问于2016-01-14得票数 41
回答已采纳
1回答
我有一个类似于这个的问题，但答案似乎不再被列出。我有一个显示属性图像和一些相关信息的瓷砖列表。我希望每一个都是一个完整的链接到另一个页面，有更多关于该属性的信息。
我已经将我的瓷砖变成了一个指令，并且当前该指令的html内容被包装在一个锚标记中。它可以到达指定的链接，但是锚标记只匹配mdGridTileFooter的高度。
有没有办法让整个瓷砖可点击？这样用户就可以点击它的任何部分并访问预期的链接(而不仅仅是底部页脚？)
HTML指令：
<a ng-click="spVm.linkToProperty(proforma)" ng-href="{{spVm.path
浏览 3提问于2016-09-07得票数 0
回答已采纳
1回答
我的模板中有这样的内容：
<div ng-repeat="item in mainCtrl.items" class="item">
<h4 ng-bind="item.title"><small ng-bind="item.pub_date"><strong></strong></small></h4>
<p ng-bind="item.content"></p>
</div>
it
浏览 2提问于2014-12-05得票数 0
回答已采纳
在角1中，使用ng-bind比插值更能提高性能。
棱角2的情况仍然是这样吗？我是否应该使用[innerText]而不是插值。
例如。
<p>{{slower}}</p>
<p [innerText]="faster"></p>
浏览 3提问于2016-11-24得票数 6
回答已采纳
目前，我正在尝试替换bigquery中的一些复数词，如从"bird“中删除"s”，并将其替换为“bird”。
但我想让他们忽略几个词，比如“更少”、“詹姆斯”、“这个”。
我想出了一个忽略“较少”但仍然是屠夫詹姆斯的方案。
SELECT REGEXP_REPLACE("James likes to chase birds","([^s])s\\b", "\\1" )
我得到的输出是"Jame喜欢追鸟“，但我期望的是"James喜欢追鸟”。
更新:我尝试使用负面展望，但不幸的是，Bigquery (RE2)不
浏览 14提问于2022-01-08得票数 2
回答已采纳
3回答
有一个对象
objData.pendingCount = '2',objData.refundCount = '1',objData.saleCount = 43;
我表演了
<td ng-bind="(objData.pendingCount / objData.saleCount * 100).toFixed(2)"></td>
这很好，但当我这么做的时候
<td ng-bind="(objData.pendingCount +objData.refundCount)/ objData.saleCount
浏览 7提问于2015-09-09得票数 1
回答已采纳
在我的角度应用程序中，我使用ng-bind在modal上显示一些静态信息。下面是HTML：
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="orgTelephone" lang-tag="ActivityReport.NewContact_Modal_Telephone" class="sr-only"&
浏览 5提问于2015-09-28得票数 0
回答已采纳
是否有一种方法可以让HTML视图具有来自服务器的预填充值，然后让AngularJS将这些值读入其$scope中？
我正在考虑这样一个场景，HTML是这样的：
<div ng-controller="TestController">
<div ng-bind="title">Test Title</div>
<div ng-bind="itemCount">33</div>
<div ng-repeat="item in items">
浏览 1提问于2013-04-05得票数 8
1回答
对不起，这个标题不好，我真的不知道如何把它写得更好，如果有人编辑它，使它更符合我的想法，那就太好了。
我想要做的是点击一个公司的->，它将加载所有给定的公司部门，当我单击某个部门时，它将显示其中的所有职位。
模板：
<label>
<span style="float: left; width: 100px;">Company</span>
<select multiple style="width: 670px; float: lef
浏览 3提问于2013-12-05得票数 0
在控制器内部，有一个函数向服务器发送$http请求，当它获得响应时，它会分配响应给，比方说。$scope.number！
我在html页面中显示了$scope.number：
<p ng-bind="number"></p>
问题是，单元我从服务器获得响应，它在浏览器中显示“未定义”。
我如何才能给出默认值？我的意思是，在回应到来之前我怎么能显示0呢？
更新：
对不起，我试图简化这个案子，但我想我举了一个坏的例子。
实际上，请求得到一个对象：$scope.group！此对象包含学生列表。我的html看起来如下：
<div ng-repeat=
浏览 5提问于2015-01-19得票数 0
回答已采纳
我正在生成引导导航菜单使用角指令。所有的事情都没问题，但是当我到达最后生成下拉菜单时，我需要动态生成HTML。要生成HTML，我使用了角ng-bind。角形很好地创建了HTML。生成HTML的ng-bind如下所示。
<div ng-bind="getDropdownMenu(submenu)">
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
浏览 4提问于2014-08-31得票数 1
回答已采纳
2回答
我已经像这样使用了ngCloak指令
<div ng-repeat="note in ctrl.notes1">
<span class="ng-cloak">{{note.$$hashKey}}</span>
<span class="label" ng-bind="note.label"></span>
<span class="author" ng-bind="note.done"
浏览 3提问于2016-05-05得票数 0
回答已采纳
我有一个像这样简单的演示
<div id="{{item.id}}" ng-repeat="item in itemList">
<div ng-bind-html="item.html"></div>
</div>
item.html包含如下所示的html：
<a href="http://www.youtube.com"><img src="icons/youtube.png" alt="Youtube"/>
浏览 7提问于2013-01-16得票数 6
在角飞镖中，可以创建您自己的组件，可以看到。如果在html中使用自定义标记，如下所示：
<rating></rating>
角将通过调用与评级相关的类的构造函数来创建一个组件，在本例中是新的RatingComponent() (如果我没有弄错的话)。
我知道您可以添加一些属性来控制它，但我想知道是否可以提供您自己的实例，而不是以角度调用构造函数。如果我在主控制器中有一个按钮列表，如何实现这样的目标：
<div ng-repeat='b in ctrl.buttonList'>
<fancy-button instance=
浏览 2提问于2013-12-09得票数 1
2回答
我试图使用指令添加带有控制器的模板：
<div directOne>
</div>
指令：
a.directive("direct-one", function ($templateRequest, $compile, $controller) {
return {
link: function (scope, elem, attrs) {
$templateRequest("template.html").then(function (html) {
var $scope = scop
浏览 2提问于2016-02-12得票数 1
我在一个角度演示和会议中提到ng-bind比{{}}绑定更好的人之一。
其中一个原因是，ng-bind将变量放在监视列表中，只有当模型发生变化时，数据才会被推送到视图，另一方面，{{}}会在每次插入表达式(我猜这是角度周期)并推送值，即使值是否更改。
此外，据说，如果屏幕上没有太多数据，您可以使用{{}}，性能问题将不可见。有人能为我解释一下这个问题吗？
浏览 0提问于2013-04-21得票数 406
回答已采纳
1回答
我想从包含以下HTML的网站中抓取一个页面：
<div class="section">
<div ng-bind="1" class="item even">First item</div>
<div ng-bind="2" class="item odd">Second item</div>
<div ng-bind="3" class="item-alt even">Third item</div&g
浏览 0提问于2022-09-22得票数 0
回答已采纳
2回答
这是我的场景：(在控制器中)
var userData = $http(
{
method: "post",
url: "http://localhost/t-app/mobile-data/update-tasks.php",
data: {
done_tasks : $scope.done_tasks,
job_id: $routeParams.job_id,
employee_id: $scope.user_id,
},
headers: { 'Cont
浏览 13提问于2015-12-30得票数 1
我目前正在学习AngularJS，并且很难理解ng-bind和ng-model之间的区别。
谁能告诉我它们有什么不同，什么时候应该用在另一个上？
浏览 12提问于2012-09-14得票数 559
回答已采纳
我对angularjs很陌生，在探索ng-bind时，我注意到它可以用作textarea的指令:：
<input type="text" ng-model="review.start"/>
<textarea ng-bind="review.start"> </textarea>
因此，我在输入标记中编写的文本也通过数据绑定反映在textarea字段中。
但ng-bind不适用于input标记。我认为ng-bind不应该与用户输入一起使用。有角的医生对此也没有太多的了解。
那么，它是否只在用户输入或其他情况
浏览 4提问于2015-01-10得票数 2
回答已采纳
3回答
我刚开始使用JS，并使用它作为客户端JavaScript的框架。如果表单是使用HTML元素成功提交的，我想通知用户(而不是用户需要单击"OK“才能继续输入的警告)。在提交表单时，我使用ngShow来显示元素。下面是元素的代码。
<p ng-model="successMessage" ng-show="isSuccess"></p>
但是，它不适合我，因为在用户成功提交表单后，我正在刷新页面。如您所知，这将导致$scope中的变量刷新。
$route.reload();
为了克服这个问题，我尽量不刷新页面。相反，我清空了控制器上的
浏览 6提问于2017-05-18得票数 0
回答已采纳
2回答
<div class="sunti_contain" ng-repeat="sunti in suntis track by $index">
<div class="individual_sunti" ng-click="update_ancestor(sunti)">
<!--needs a unique div#id via angularz-->
<div class="sunti_co
浏览 3提问于2016-10-02得票数 0
回答已采纳
{{ }和ng-bind在角度上有什么区别吗？
我对角很陌生。我首先使用{{ }}，然后在文档中找到ng-bind。我认为他们做同样的工作，但为什么额外的指令，如果没有，那么请区分。
浏览 10提问于2014-09-09得票数 14
回答已采纳
我的一个设计有问题。我已经创建了一个非常类似于windows 8瓷砖的设计，但有时也会出现一个问题。
.row和..large*有时在它们包含的元素的顶部有一些神秘的缺口。任何地方都没有空隙或空白处造成这种情况，但这种情况正在发生。
我已经做了一个小提琴手的例子来证明它的有效性。请有人看看，告诉我我做错了什么：
这是呈现之前的HTML：
<div class="row">
<a class="back" href="/"><i class="fa fa-arrow-circle-left"&
浏览 2提问于2015-03-12得票数 0
假设toShowVar我们没有定义，哪一个更昂贵？
<span ng-bind="toShowVar" ng-show="toShowVar"></span>
或
<span ng-bind="toShowVar"></span>
如果变量未定义，后者显然不会在屏幕上打印任何内容。
浏览 3提问于2017-07-05得票数 1
回答已采纳
在使用AngularJS时，我注意到了一个在我看来是错误的模式。
在构建表时，我的数据是使用ng-bind绑定的。但是，如果我需要将单元格中的文本链接到某些内容，则必须手动创建链接。
未链接的表单元格如下所示：
<td ng-bind="customer.name"></td>
但是如果我想创建一个链接，我会这样做：
<td><a ng-href="/customer/{{customer.id}}">{{customer.name}}</a></td>
有没有使用属性创建链接的方法？类似于
浏览 1提问于2012-07-25得票数 6
如何将两个或多个模型绑定到angularjs.All中的单个标记中，我想要做的是通过在span中添加名字和最后一个来显示全名。我使用了两个span标记来实现这一点。可以在一个标签中添加两个模型吗？
<div ng-controller="mycontroller2">
<table>
<tr>
<td><label>First Name </label></td>
<td><input type="text" ng-m
浏览 0提问于2015-08-31得票数 2
回答已采纳
我一直试图检查某些属性是否不是DOM HTML5属性的一部分。代码遍历html标记并保存在Set上。我的想法是在这个示例中标识属性ng-controller、ng-repeat、ng-bind，因为其他属性(id和class)是DOM HTML5属性的一部分。
<div id="html-markup">
<div class="class-1" ng-controller="myController">
<table id="the-table">
浏览 1提问于2017-10-04得票数 4
回答已采纳
2回答
我有下面的脚本，其中包含一个json。
$http({
url: '/mpdValidation/mpdValidate',
method: "POST",
data: { 'message' : mpdData }
).then(function(response) {
console.log(response.data.searchResults[0].customers);
$rootScope.mpdValidatedData = response.data.searchResu
浏览 0提问于2018-09-25得票数 0
回答已采纳
我在现有站点上使用angularJs实现了非常简单的功能。
大概是这样的
<div ng-app>
<div ng-controller="TermsController">
<input type="checkbox" ng-model="terms.agree" />
<input type="submit" value="{{terms.label}}" .. />
</div>
</div>
浏览 1提问于2012-11-08得票数 5
回答已采纳
我正试着用某一项的信息来显示一个模态。但是当我调用这个函数时，它会读到：
TypeError:无法读取Scope.$scope.openModal处未定义的属性“打开”
我希望有人能告诉我为什么，这是相关代码：
模板
<div ng-controller="View1Ctrl">
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
浏览 3提问于2016-02-22得票数 4
回答已采纳
我刚刚开始使用kendo网格，并创建了我的列，所有的东西都可以与返回的数据一起工作。我尝试在列定义中添加一个模板值，而kendo文档说我应该能够使用{{dataItem.something}}来访问模板中的值。这不管用。然而，做<span ng-bind='dataItem.something'></span>很好。为什么是这样，我怎样才能使花括号绑定工作呢？谢谢。
下面是我所做工作的伪代码片段：
在我的html和控制器中(我省略了所有其他选项，如数据源等)：
this.gridOptions = {
columns: [
浏览 3提问于2017-04-27得票数 1
回答已采纳
我有以下<select>元素：
<select ng-model="pTitle">
<option value="Mr.">Mr.</option>
<option value="Mrs.">Mrs.</option>
<option value="Ms.">Ms.</option>
</select>
当选择一个选项时，我会像这样更改文本。
<section>
Greetings, <
浏览 2提问于2015-09-24得票数 0
回答已采纳
3回答
我想绑定span元素的内容(即元素的当前位置)。
问题:当我更改元素位置时，角不会更新ng-bind属性的值。
这是我的html：
!doctype html>
<html lang="en" ng-app="exempleApp">
<head>
<meta charset="utf-8">
<title>jQuery UI Draggable - Default functionality</title>
<link rel="stylesheet&#
浏览 0提问于2015-05-06得票数 1
回答已采纳
考虑以下代码-它使用ng-bind在元素级别定义的表达式中打印两个模型。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-example16-production</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.10/angular.mi
浏览 1提问于2014-05-27得票数 0
好吧，我要让狗追球，球追鼠标光标。当狗处于与球相同的位置时，游戏应该停止并打印“游戏结束”。现在，我的代码检查两个对象在游戏开始后是否处于相同的位置，所以它就结束了，因为在开始时，对象位于相同的位置。经过一段时间的比赛后，我怎样才能检查位置呢？
`
if rect.colliderect(rect2) == True:
clock.tick(1000)
self.chasing = False
rect3 = self.fontim.get_rect()
rect3 = rect3.move((self.width-rec
浏览 2提问于2013-11-09得票数 0
回答已采纳
2回答
<tr ng-repeat-start="marks in pagedItemss">
<td>
<input type="text" ng-model="marks.aaa" ng-pattern="/^[0-9]*$/" maxlength="3">
</td>
<td>
<input type="text" ng-model="marks.bbb" ng-pattern="/
浏览 7提问于2017-11-11得票数 0
我有一个后端服务，它将数据发送到一个$scope变量。我使用这个变量来使用ng-repeat填充表中的行。
加载页面时，浏览器上会显示一行，当页面加载完成时，一行会突然消失。在一段时间内，当检索数据时，所需的行将按预期填充。
我想删除第一行，因为它看起来不太好。
以下是代码：
...
<tr ng-repeat="row in rows">
<td ng-bind="row.vname"></td>
<td ng-bind="row.mname"></td>
&l
浏览 4提问于2017-04-26得票数 1
回答已采纳
我有以下HTML代码。
<span class="ng-binding" ng-bind="::result.display">All Sector ETFs</span>
<span class="ng-binding" ng-bind="::result.display">China Macro Assets</span>
<span class="ng-binding" ng-bind="::result.display">Con
浏览 2提问于2016-06-08得票数 2
1回答
我使用ui选择库来实现“标记”功能。
我使用的是对象数组，其中每个对象都有id和名称。它工作正常。
如果我输入不存在的标签，它会创建一个新的标签，这是我想要的，但我遇到的唯一问题是，如果用户输入已经存在的标签，它会同时显示新的和现有的标签。仅当新标记尚未存在时，ui-select才允许添加新标记。
如果我输入algorithm，那么它应该选择/显示现有的"Algorithm“标签，而不是允许重复的标签插入。
我找不到这方面的任何设置。同样的问题也发生在他们的标签示例页面上。我猜这不是故意的。那么，这在ui-select中是可能的，还是应该在我的代码中处理它？有什么解决方案吗？
浏览 2提问于2016-10-09得票数 6
我需要使用Java读取Web驱动程序弹出窗口中显示的文本。我可以处理弹出窗口关闭。我不知道如何读取弹出窗口上显示的文本并在控制台中打印出来。
HTML：
<ul class="traceInner"><li class="traceHead"><span><input type="checkbox" class="chkall hand">奖期</span><em>追号倍数</em><em>追号状态</em><em&g
浏览 0提问于2015-11-19得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
