AngularJS ng-style中使用filter


Posted in Javascript onSeptember 21, 2016

问题原因:

Angular中使用boostrap的progress在ie8下有问题, 不能显示出进度

错误的写法:

<div class="progress">
  <div class="bar bar-success"
     style="width:{{user.used | percent:user.total}}"></div></div>

这可能是因为在刚开始渲染页面时, user的值还没有获取到, 所以width一直为0. 后来获取到user的值了, 但界面已经不能自动更新了导致的.

正确的写法:

<div class="progress">
  <div class="bar bar-success"
     ng-style="{'width': (user.used | percent:user.total)}"></div>
</div>

总结

因为ng-style是angular自己的指令, 它会监听user的变化, 并输出层div的style属性, 所以是正确的.
注意, 在ng-style中使用filter: (user.used | percent: user.total)

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

Javascript 相关文章推荐
区分JS中的undefined,null,&quot;&quot;,0和false
Mar 08 Javascript
jquery 页面全选框实践代码
Apr 02 Javascript
设置iframe的document.designMode后仅Firefox中其body.innerHTML为br
Feb 27 Javascript
jQuery中removeData()方法用法实例
Dec 27 Javascript
JavaScript实现信用卡校验方法
Apr 07 Javascript
jQuery动态修改字体大小的方法【测试可用】
Sep 09 Javascript
javascript定时器取消定时器及优化方法
Jul 08 Javascript
浅谈Javascript中的对象和继承
Apr 19 Javascript
详解vue+axios给开发环境和生产环境配置不同的接口地址
Aug 16 Javascript
JavaScript 预解析的4种实现方法解析
Sep 03 Javascript
jQuery 查找元素操作实例小结
Oct 02 jQuery
JS图片懒加载技术实现过程解析
Jul 27 Javascript
BootStrap与validator 使用笔记(JAVA SpringMVC实现)
Sep 21 #Javascript
JS实现简单的tab切换选项卡效果
Sep 21 #Javascript
详解AngularJs中$sce与$sceDelegate上下文转义服务
Sep 21 #Javascript
JS 获取HTML标签内的子节点的方法
Sep 21 #Javascript
浅谈JS使用[ ]来访问对象属性
Sep 21 #Javascript
js style.display=block显示布局错乱问题的解决方法
Sep 21 #Javascript
JS封装的选项卡TAB切换效果示例
Sep 20 #Javascript
You might like
使用PHP备份MYSQL数据的多种方法
2014/01/15 PHP
php常用hash加密函数
2014/11/22 PHP
简单了解WordPress开发中update_option()函数的用法
2016/01/11 PHP
PHP实现基于mysqli的Model基类完整实例
2016/04/08 PHP
thinkPHP简单遍历数组方法分析
2016/05/16 PHP
PHP7新特性foreach 修改示例介绍
2016/08/26 PHP
PHP 验证身份证是否合法的函数
2017/02/09 PHP
PHP实现的策略模式示例
2019/03/20 PHP
jQuery使用手册之二 DOM操作
2007/03/24 Javascript
jQuery 在光标定位的地方插入文字的插件
2012/05/10 Javascript
JSONP 跨域共享信息
2012/08/16 Javascript
Windows 系统下安装和部署Egret的开发环境
2014/07/31 Javascript
原生JS实现《别踩白块》游戏(兼容IE)
2017/02/20 Javascript
Vue三层嵌套路由的示例代码
2018/05/05 Javascript
vue打包之后生成一个配置文件修改接口的方法
2018/12/09 Javascript
vue基于viewer实现的图片查看器功能
2019/04/12 Javascript
vue项目中在外部js文件中直接调用vue实例的方法比如说this
2019/04/28 Javascript
详解Webpack4多页应用打包方案
2020/07/16 Javascript
[46:00]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#4EG VS Fnatic第一局
2016/03/03 DOTA
win7 下搭建sublime的python开发环境的配置方法
2014/06/18 Python
Python 爬虫图片简单实现
2017/06/01 Python
Python向Excel中插入图片的简单实现方法
2018/04/24 Python
Python装饰器的执行过程实例分析
2018/06/04 Python
基于python的图片修复程序(实现水印去除)
2018/06/04 Python
python的移位操作实现详解
2019/08/21 Python
python对Excel按条件进行内容补充(推荐)
2019/11/24 Python
Python实现变声器功能(萝莉音御姐音)
2019/12/05 Python
使用Python+selenium实现第一个自动化测试脚本
2020/03/17 Python
jupyter notebook读取/导出文件/图片实例
2020/04/16 Python
CSS3 优势以及网页设计师如何使用CSS3技术
2009/07/29 HTML / CSS
武汉某公司的C#笔试题面试题
2015/12/25 面试题
2015年度销售个人工作总结
2015/03/31 职场文书
2015年公司后勤管理工作总结
2015/05/13 职场文书
优秀志愿者感言
2015/08/01 职场文书
Oracle配置dblink访问PostgreSQL的操作方法
2022/03/21 PostgreSQL
nginx共享内存的机制详解
2022/03/21 Servers