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 相关文章推荐
让getElementsByName适应IE和firefox的方法
Sep 24 Javascript
在线编辑器中换行与内容自动提取
Apr 24 Javascript
JavaScript 用cloneNode方法克隆节点的代码
Oct 15 Javascript
JQuery显示隐藏DIV的方法及代码实例
Apr 16 Javascript
Bootstrap多级导航栏(级联导航)的实现代码
Mar 08 Javascript
ajax分页效果(bootstrap模态框)
Jan 23 Javascript
jquery easyui如何实现格式化列
Jul 30 jQuery
修改UA在PC中访问只能在微信中打开的链接方法
Nov 27 Javascript
JavaScript学习总结(一) ECMAScript、BOM、DOM(核心、浏览器对象模型与文档对象模型)
Jan 07 Javascript
关于JavaScript中高阶函数的魅力详解
Sep 07 Javascript
详解Element 指令clickoutside源码分析
Feb 15 Javascript
在vue中把含有html标签转为html渲染页面的实例
Oct 28 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计算两个日期时间差(返回年、月、日)
2014/06/19 PHP
PHP中模拟处理HTTP PUT请求的例子
2014/07/22 PHP
php给图片加文字水印
2015/07/31 PHP
php 二维数组快速排序算法的实现代码
2017/10/17 PHP
js 编写规范
2010/03/03 Javascript
预加载css或javascript的js代码
2010/04/23 Javascript
《JavaScript高级程序设计》阅读笔记(一) ECMAScript基础
2012/02/27 Javascript
jquery ajax方式直接提交整个表单核心代码
2013/08/15 Javascript
html的DOM中document对象images集合用法实例
2015/01/21 Javascript
谈谈js中的prototype及prototype属性解释和常用方法
2015/11/25 Javascript
通过设置CSS中的position属性来固定层的位置
2015/12/14 Javascript
JavaScript学习笔记之ES6数组方法
2016/03/25 Javascript
JavaScript笔记之数据属性和存储器属性
2016/03/31 Javascript
JS中dom0级事件和dom2级事件的区别介绍
2016/05/05 Javascript
详解AngularJs中$sce与$sceDelegate上下文转义服务
2016/09/21 Javascript
详解Vue微信授权登录前后端分离较为优雅的解决方案
2018/06/29 Javascript
使用Layui搭建后台管理界面的操作方法
2019/09/20 Javascript
Vue3 响应式侦听与计算的实现
2020/11/11 Javascript
vue导入.md文件的步骤(markdown转HTML)
2020/12/31 Vue.js
Python实现根据指定端口探测服务器/模块部署的方法
2014/08/25 Python
Python multiprocessing模块中的Pipe管道使用实例
2015/04/11 Python
Python利用itchat对微信中好友数据实现简单分析的方法
2017/11/21 Python
彻彻底底地理解Python中的编码问题
2018/10/15 Python
Python开发网站目录扫描器的实现
2019/02/21 Python
基于python实现删除指定文件类型
2020/07/21 Python
Pycharm快捷键配置详细整理
2020/10/13 Python
可能这些是你想要的H5软键盘兼容方案(小结)
2019/04/23 HTML / CSS
使用layui实现左侧菜单栏及动态操作tab项的方法
2020/11/10 HTML / CSS
怀俄明州飞钓:Platte River Fly Shop
2017/12/28 全球购物
Wiggle澳大利亚:自行车、跑步、游泳商店
2020/11/07 全球购物
初中生操行评语大全
2014/04/24 职场文书
公司捐款倡议书
2014/05/14 职场文书
最美护士演讲稿
2014/08/27 职场文书
工人先进事迹材料
2014/12/26 职场文书
Python图像处理之图像拼接
2021/04/28 Python
Redis如何使用乐观锁(CAS)保证数据一致性
2022/03/25 Redis