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 相关文章推荐
不使用XMLHttpRequest实现异步加载 Iframe和script
Oct 29 Javascript
js动态为代码着色显示行号
May 29 Javascript
js中split和replace的用法实例
Feb 28 Javascript
纯JS实现弹性导航条效果
Mar 06 Javascript
JavaScript 字符串数字左补位,右补位,取固定长度,截位扩展函数代码
Mar 25 Javascript
详解webpack require.ensure与require AMD的区别
Dec 13 Javascript
Vue.JS实现垂直方向展开、收缩不定高度模块的JS组件
Jun 19 Javascript
深入理解JavaScript的值传递和引用传递
Oct 24 Javascript
如何使用Jquery动态生成二级选项列表
Feb 06 jQuery
JavaScript设计模式--简单工厂模式定义与应用案例详解
May 23 Javascript
Vue3 响应式侦听与计算的实现
Nov 11 Javascript
js实现自动锁屏功能
Jun 02 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
第二节--PHP5 的对象模型
2006/11/16 PHP
php摘要生成函数(无乱码)
2012/02/04 PHP
php教程之魔术方法的使用示例(php魔术函数)
2014/02/12 PHP
PHP代码优化的53个细节
2014/03/03 PHP
php实现最简单的MVC框架实例教程
2014/09/08 PHP
php中的ini配置原理详解
2014/10/14 PHP
jquery不支持toggle()高(新)版本的问题解决
2016/09/24 PHP
php中错误处理操作实例分析
2019/08/23 PHP
JS trim去空格的最佳实践
2011/10/30 Javascript
js控制CSS样式属性语法对照表
2012/12/11 Javascript
javascript获取元素CSS样式代码示例
2013/11/28 Javascript
jquery删除指定的html标签并保留标签内文本内容的方法
2014/04/02 Javascript
jquery禁止输入数字以外的字符的示例(纯数字验证码)
2014/04/10 Javascript
14款经典网页图片和文字特效的jQuery插件-前端开发必备
2015/08/25 Javascript
在web中js实现类似excel的表格控件
2016/09/01 Javascript
纯JS代码实现隔行变色鼠标移入高亮
2016/11/23 Javascript
详解vue父子组件间传值(props)
2017/06/29 Javascript
浅谈Node.js爬虫之网页请求模块
2018/01/11 Javascript
cropper js基于vue的图片裁剪上传功能的实现代码
2018/03/01 Javascript
使用weixin-java-tools完成微信授权登录、微信支付的示例
2018/09/26 Javascript
jQuery实现上下滚动公告栏详细代码
2018/11/21 jQuery
Vue 2.0 侦听器 watch属性代码详解
2019/06/19 Javascript
解决layui 表单元素radio不显示渲染的问题
2019/09/04 Javascript
Layui带搜索的下拉框的使用以及动态数据绑定方法
2019/09/28 Javascript
vue实现简单的登录弹出框
2020/10/26 Javascript
vue 通过base64实现图片下载功能
2020/12/19 Vue.js
关于python2 csv写入空白行的问题
2018/06/22 Python
opencv实现静态手势识别 opencv实现剪刀石头布游戏
2019/01/22 Python
Opencv-Python图像透视变换cv2.warpPerspective的示例
2019/04/11 Python
Python多进程入门、分布式进程数据共享实例详解
2019/06/03 Python
PyCharm2018 安装及破解方法实现步骤
2019/09/09 Python
Django用户身份验证完成示例代码
2020/04/03 Python
2015年机关党委工作总结
2015/05/23 职场文书
医院感染管理制度
2015/08/05 职场文书
2020优秀员工演讲稿(三篇)
2019/10/17 职场文书
python树莓派通过队列实现进程交互的程序分析
2021/07/04 Python