AngularJS ng-bind 指令简单实现

AngularJS ng-bind 指令

AngularJS 实例

绑定 <p> 内的 innerHTML 到变量 myText:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="" ng-init="myText='Hello World!'">

<p ng-bind="myText"></p>

</div>

</body>
</html>

运行结果：

Hello World!

定义和用法

ng-bind 指令告诉 AngularJS 使用给定的变量或表达式的值来替换 HTML 元素的内容。

如果给定的变量或表达式修改了，指定替换的 HTML 元素也会修改。

语法

<element ng-bind="expression"></element>

或作为 CSS 类：

<element class="ng-bind: expression"></element>

所有的 HTML 元素都支持该指令。

参数值

值 描述
expression 指定要执行的变量或表达式。

以上就是对AngularJS ng-bind 指令的详细介绍，有需要的朋友可以参考下。

赞 (0)

相关推荐

  • Angular中ng-bind和ng-model的区别实例详解

    ng-bind和ng-model的区别 AngularJS的数据绑定有ng-bind和ng-model,一般用于如下: <input ng-model="object.xxx"> <span ng-bind="object.xxx"></span> ng-bind是单向绑定,由作用于$scope到view层,且在HTML控件(HTML控件有:input.select.button和textarea)中不可显示. ng-model是

  • angularjs中使用ng-bind-html和ng-include的实例

    下面这个例子,往div标签内添加html内容: <!doctype html> <html ng-app="myApp"> <head> <meta charset="UTF-8"> <title>demo</title> <script type="text/javascript" src="lib/angularjs/angular.min.js"

  • ANGULARJS中用NG-BIND指令实现单向绑定的例子

    本文简单介绍AngularJS框架后,用一个实例演示{{}}插值法和ng-bind指令的使用. 不同于jquery只是一个加强和简化前端开发的类库,angularjs是一个完整web前端框架,所以学习曲线高了很多. angularjs给我的感觉类似于Java的Spring框架,处于中心容器位置粘合其他组件,其内置的很多组件已经可以满足一般场景,特殊场景我们可以按照框架思路扩展. 下面从最基础的内容走起: 复制代码 代码如下: <!DOCTYPE html> <html ng-app>

  • AngularJS ng-bind-html 指令详解及实例代码

    AngularJS ng-bind-html 指令 AngularJS 实例 绑定 <p> 内的 innerHTML 到变量 myText: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js">&l

  • AngularJS基础 ng-include 指令简单示例

    AngularJS ng-include 指令 AngularJS 实例 包含 HTML 文件: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head>

  • AngularJS教程 ng-style 指令简单示例

    AngularJS ng-style 指令 AngularJS 实例 使用AngularJS添加样式,使用 CSS key=>value 对象格式: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js">&

  • AngularJS基础 ng-repeat 指令简单示例

    AngularJS ng-repeat 指令 AngularJS 实例 循环输出多个标题: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <

  • AngularJS基础 ng-value 指令简单示例

    AngularJS ng-value 指令 AngularJS 实例 设置输入框的值: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <b

  • AngularJS基础 ng-src 指令简单示例

    AngularJS ng-src 指令 AngularJS 实例 添加图片地址: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body

  • AngularJS基础 ng-keypress 指令简单示例

    AngularJS ng-keypress 指令 AngularJS 实例 按下按键时执行的代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head>

  • AngularJS基础 ng-cloak 指令简单示例

    AngularJS ng-cloak 指令 AngularJS 实例 页面加载时防止应用闪烁: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> &

  • AngularJS基础 ng-selected 指令简单示例

    AngularJS ng-selected 指令 AngularJS 实例 获取选中的选项: 点击复选框选择 BMW 选项: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>

  • AngularJS基础 ng-switch 指令简单示例

    AngularJS ng-switch 指令 根据选中的值显示对应部分: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body ng-

  • AngularJS基础 ng-paste 指令简单示例

    AngularJS ng-paste 指令 AngularJS 实例 文本被粘贴时执行表达式: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> &

随机推荐