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


Posted in Javascript onAugust 03, 2016

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 ng-app="">

<div ng-init="myVar = 'http://www.runoob.com/wp-content/uploads/2014/06/angular.jpg'">
<h1>Angular</h1>
<img ng-src="{{myVar}}">
</div>

<p>该实例可以使用原生的 src 输出,但是使用 AngularJS 代码插入值,使用 ng-src 属性更好。</p>

</body>
</html>

定义和用法

ng-src 指令覆盖了 <img> 元素的 src 属性。

如果你使用了 AngularJS 代码设置图片地址,请使用 ng-src 指令替代 src 属性。

ng-src 指令确保的 AngularJS 代码执行前不显示图片。

语法

<img ng-src="string"></img>

<img> 元素支持该属性。

参数值

描述
string 表达式返回的字符串。

以上就对AngularJS ng-src 资料的整理,后续继续补充,谢谢大家对本站的支持!

Javascript 相关文章推荐
IE7提供XMLHttpRequest对象为兼容
Mar 08 Javascript
JavaScript 产生不重复的随机数三种实现思路
Dec 13 Javascript
javascript下拉列表中显示树形菜单的实现方法
Nov 17 Javascript
JavaScript中原型链存在的问题解析
Sep 25 Javascript
JavaScript动态数量的文件上传控件
Nov 18 Javascript
javascript数据类型详解
Feb 07 Javascript
jQuery DOM节点的遍历方法小结
Aug 15 jQuery
jQuery使用zTree插件实现可拖拽的树示例
Sep 23 jQuery
JS实现调用本地摄像头功能示例
May 18 Javascript
使用JavaScript和MQTT开发物联网应用示例解析
Aug 07 Javascript
js+h5 canvas实现图片验证码
Oct 11 Javascript
针对Vue路由history模式下Nginx后台配置操作
Oct 22 Javascript
JS在Chrome浏览器中showModalDialog函数返回值为undefined的解决方法
Aug 03 #Javascript
AngularJS基础 ng-show 指令简单示例
Aug 03 #Javascript
JavaScript判断数组是否存在key的简单实例
Aug 03 #Javascript
AngularJS基础 ng-selected 指令简单示例
Aug 03 #Javascript
jQuery 判断是否包含在数组中Array[]的方法
Aug 03 #Javascript
JS实现保留n位小数的四舍五入问题示例
Aug 03 #Javascript
AngularJS基础 ng-repeat 指令简单示例
Aug 03 #Javascript
You might like
PHP mcrypt可逆加密算法分析
2011/07/19 PHP
PHP中Closure类的使用方法及详解
2015/10/09 PHP
php实现用户登陆简单实例
2017/04/04 PHP
PHP实现的随机红包算法示例
2017/08/14 PHP
解决Laravel 不能创建 migration 的问题
2019/10/09 PHP
JavaScript自执行闭包的小例子
2013/06/29 Javascript
js去除输入框中所有的空格和禁止输入空格的方法
2014/06/09 Javascript
Javascript 拖拽的一些简单的应用(逐行分析代码,让你轻松了拖拽的原理)
2015/01/23 Javascript
JavaScript函数作用域链分析
2015/02/13 Javascript
js图片轮播手动切换特效
2017/01/12 Javascript
详解javascript常用工具类的封装
2018/01/30 Javascript
让Vue也可以使用Redux的方法
2018/05/23 Javascript
Vue组件内部实现一个双向数据绑定的实例代码
2019/04/04 Javascript
python实现数据库跨服务器迁移
2018/04/12 Python
详解python Todo清单实战
2018/11/01 Python
centos6.5安装python3.7.1之后无法使用pip的解决方案
2019/02/14 Python
Python上下文管理器用法及实例解析
2019/11/11 Python
NumPy中的维度Axis详解
2019/11/26 Python
利用matplotlib为图片上添加触发事件进行交互
2020/04/23 Python
python 装饰器的实际作用有哪些
2020/09/07 Python
python openCV自制绘画板
2020/10/27 Python
python 窃取摄像头照片的实现示例
2021/01/08 Python
python中HTMLParser模块知识点总结
2021/01/25 Python
财务管理专业推荐信
2013/11/19 职场文书
财务与信息服务专业推荐信
2013/11/28 职场文书
高职教师岗位职责
2013/12/24 职场文书
工厂采购员岗位职责
2014/04/08 职场文书
人身损害赔偿协议书范本
2014/09/27 职场文书
政风行风整改方案
2014/10/25 职场文书
党的群众路线教育实践活动实施方案
2014/10/31 职场文书
2015共产党员公开承诺书
2015/01/22 职场文书
2015年网络管理员工作总结
2015/05/21 职场文书
运动会100米广播稿
2015/08/19 职场文书
2015年行政管理人员工作总结
2015/10/15 职场文书
Python 中的Sympy详细使用
2021/08/07 Python
mysqldump进行数据备份详解
2022/07/15 MySQL