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 指令的详细介绍,有需要的朋友可以参考下。
相关推荐
-
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-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"
-
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 指令详解及实例代码
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-BIND指令实现单向绑定的例子
本文简单介绍AngularJS框架后,用一个实例演示{{}}插值法和ng-bind指令的使用. 不同于jquery只是一个加强和简化前端开发的类库,angularjs是一个完整web前端框架,所以学习曲线高了很多. angularjs给我的感觉类似于Java的Spring框架,处于中心容器位置粘合其他组件,其内置的很多组件已经可以满足一般场景,特殊场景我们可以按照框架思路扩展. 下面从最基础的内容走起: 复制代码 代码如下: <!DOCTYPE html> <html ng-app>
-
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> &
随机推荐
- powershell玩转SQL SERVER所有版本的方法
- javascript实现点击按钮弹出一个可关闭层窗口同时网页背景变灰的方法
- MongoDB快速入门笔记(四)之MongoDB查询文档操作实例代码
- MyBatis持久层框架的用法知识小结
- .net泛型通用函数的特殊问题的解决方法
- PHP的自定义模板引擎
- ASP利用XMLHTTP实现表单提交以及cookies的发送的代码
- c#中的实现php中的preg_replace
- vbs base64 解密脚本代码
- Oracle 9i 数据库异常关闭后的启动
- JavaScript获取键盘按键的键码(参照表)
- 浅谈JavaScript 标准对象
- javascript 表单规则集合对象
- 解决linux下大量TIME WAIT的方法详解
- Android蓝牙通信之搜索蓝牙设备
- Android安卓中循环录像并检测内存卡容量
- 三种新型技术在宽带综合城域网中的应用
- Exchange在接收连接器上启用匿名中继的方法
- Flutter下载更新App的方法示例
- python中通过selenium简单操作及元素定位知识点总结