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 相关文章推荐
慎用 somefunction.prototype 分析
Jun 02 Javascript
jquery判断元素是否隐藏的多种方法
May 06 Javascript
从JQuery源码分析JavaScript函数的apply方法与call方法
Sep 25 Javascript
jquery删除指定子元素代码实例
Jan 13 Javascript
基于Javascript实现倒计时功能
Feb 22 Javascript
JS实现禁止鼠标右键的功能
Oct 15 Javascript
Vue Transition实现类原生组件跳转过渡动画的示例
Aug 19 Javascript
基于jQuery实现图片推拉门动画效果的两种方法
Aug 26 jQuery
JS实现获取进今年第几天是周几的方法分析
Jun 27 Javascript
基于JQuery实现页面定时弹出广告
May 08 jQuery
Vue的props父传子的示例代码
May 20 Javascript
在Vue中使用antv的示例代码
Jun 29 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读取30天之内的根据算法排序的代码
2008/04/06 PHP
无刷新动态加载数据 滚动条加载适合评论等页面
2013/10/16 PHP
php抓取网站图片并保存的实现方法
2015/10/29 PHP
PHP支付宝当面付2.0代码
2018/12/21 PHP
解决 FireFox 下[使用event很麻烦] 的问题.
2006/08/22 Javascript
让textarea自动调整大小的js代码
2011/04/12 Javascript
jquery ajax实现下拉框三级无刷新联动,且保存保持选中值状态
2013/10/29 Javascript
jQuery实现仿腾讯微博滑出效果报告每日天气的方法
2015/05/11 Javascript
微信小程序 wxapp导航 navigator详解
2016/10/31 Javascript
vue.js指令v-for使用及索引获取
2016/11/03 Javascript
基于Node的React图片上传组件实现实例代码
2017/05/10 Javascript
es7学习教程之Decorators(修饰器)详解
2017/07/21 Javascript
微信小程序注册60s倒计时功能 使用JS实现注册60s倒计时功能
2017/08/16 Javascript
jQuery 操作 HTML 元素和属性的方法
2018/11/12 jQuery
vue--vuex详解
2019/04/15 Javascript
Vue 图片压缩并上传至服务器功能
2020/01/15 Javascript
vue elementui 实现搜索栏公共组件封装的实例代码
2020/01/20 Javascript
js实现简易点击切换显示或隐藏
2020/11/29 Javascript
javascript实现放大镜功能
2020/12/09 Javascript
[02:40]DOTA2英雄基础教程 先知
2013/11/29 DOTA
windows10下python3.5 pip3安装图文教程
2018/04/02 Python
Python2与Python3的区别实例总结
2019/04/17 Python
django如何通过类视图使用装饰器
2019/07/24 Python
python文字转语音的实例代码分析
2019/11/12 Python
numpy矩阵数值太多不能全部显示的解决
2020/05/14 Python
python安装第三方库如xlrd的方法
2020/10/31 Python
python对输出的奇数偶数排序实例代码
2020/12/04 Python
SCDKey德国:全球领先的数字游戏市场
2019/04/09 全球购物
西班牙香水和化妆品连锁店:Druni
2019/05/05 全球购物
"引用"与多态的关系
2013/02/01 面试题
干部行政关系介绍信
2014/01/17 职场文书
小班重阳节活动方案
2014/02/08 职场文书
企业标语大全
2014/07/01 职场文书
先进党支部事迹材料2016
2016/02/26 职场文书
小学二年级语文教学反思
2016/03/03 职场文书
长辈生日祝福语大全(72句)
2019/08/09 职场文书