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 相关文章推荐
兼容IE、FireFox、Chrome等浏览器的xml处理函数js代码
Nov 30 Javascript
js querySelector和getElementById通过id获取元素的区别
Apr 20 Javascript
Jquery 数据选择插件Pickerbox使用介绍
Aug 24 Javascript
Js-$.extend扩展方法使方法参数更灵活
Jan 15 Javascript
js通过地址栏给action传值(中文乱码全是问号)
May 02 Javascript
javascript不可用的问题探究
Oct 01 Javascript
如何在MVC应用程序中使用Jquery
Nov 17 Javascript
JavaScript File分段上传
Mar 10 Javascript
thinkphp标签实现bootsrtap轮播carousel实例代码
Feb 19 Javascript
详解基于webpack和vue.js搭建开发环境
Apr 05 Javascript
javascript获取图片的top N主色值方法详解
Jan 26 Javascript
JavaScript中构造函数与原型链之间的关系详解
Feb 25 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
thinkphp验证码的实现(form、ajax实现验证)
2016/07/28 PHP
php 调用ffmpeg获取视频信息的简单实现
2017/04/03 PHP
thinkPHP框架通过Redis实现增删改查操作的方法详解
2019/05/13 PHP
php获取是星期几的的一些常用姿势
2019/12/15 PHP
jquery Moblie入门—hello world的示例代码学习
2013/01/08 Javascript
解决jQuery动态获取手机屏幕高和宽的问题
2014/05/07 Javascript
firefox浏览器用jquery.uploadify插件上传时报HTTP 302错误
2015/03/01 Javascript
js实现仿京东2级菜单效果(带延时功能)
2015/08/27 Javascript
Angularjs 自定义服务的三种方式(推荐)
2016/08/02 Javascript
JavaScript数组操作函数汇总
2016/08/05 Javascript
Node.js与MySQL交互操作及其注意事项
2016/10/05 Javascript
JavaScript中的this陷阱的最全收集并整理(没有之一)
2017/02/21 Javascript
原生JavaScript实现精美的淘宝轮播图效果示例【附demo源码下载】
2017/05/27 Javascript
详谈vue+webpack解决css引用图片打包后找不到资源文件的问题
2018/03/06 Javascript
迅速了解一下ES10中Object.fromEntries的用法使用
2019/03/05 Javascript
微信小程序实现张图片合成为一张并下载
2019/07/16 Javascript
对python3标准库httpclient的使用详解
2018/12/18 Python
PyTorch实现ResNet50、ResNet101和ResNet152示例
2020/01/14 Python
TensorFlow——Checkpoint为模型添加检查点的实例
2020/01/21 Python
PyQt5实现登录页面
2020/05/30 Python
Python使用plt.boxplot() 参数绘制箱线图
2020/06/04 Python
Python数据库封装实现代码示例解析
2020/09/05 Python
python 解决函数返回return的问题
2020/12/05 Python
使用CSS3在触屏上为按钮实现激活效果
2013/09/27 HTML / CSS
基于html5 canvas实现漫天飞雪效果实例
2014/09/10 HTML / CSS
HTML5+CSS3:3D展示商品信息示例
2017/01/03 HTML / CSS
法国时尚品牌乐都特瑞士站:La Redoute瑞士
2016/09/05 全球购物
美国最大的高尔夫发球时间预订网站:TeeOff.com
2018/03/28 全球购物
德国香水、化妆品和护理产品网上商店:Parfumdreams
2018/09/26 全球购物
印度民族服装购物网站:BIBA
2019/08/05 全球购物
美体小铺波兰官方网站:The Body Shop波兰
2019/09/03 全球购物
会计专业自我鉴定范文
2013/10/06 职场文书
重阳节活动总结
2014/08/27 职场文书
Matlab求解数组中的最大值及它所在的具体位置
2021/04/16 Python
python基础之停用词过滤详解
2021/04/21 Python
oracle通过存储过程上传list保存功能
2021/05/12 Oracle