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 相关文章推荐
jQuery点击tr实现checkbox选中的方法
Mar 19 Javascript
javascript完美拖拽的实现方法
Sep 29 Javascript
jQuery实现当前页面标签高亮显示的方法
Mar 10 Javascript
jquery实现像栅栏一样左右滑出式二级菜单效果代码
Aug 24 Javascript
微信小程序 网络请求(GET请求)详解
Nov 16 Javascript
javascript简单进制转换实现方法
Nov 24 Javascript
JavaScript基础之AJAX简单的小demo
Jan 29 Javascript
vue-prop父组件向子组件进行传值的方法
Mar 01 Javascript
Node.js Buffer用法解读
May 18 Javascript
vue父组件异步获取数据传给子组件的方法
Jul 26 Javascript
JavaScript中call和apply方法的区别实例分析
Aug 03 Javascript
javascript实现评分功能
Jun 24 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面向对象全攻略 (十七) 自动加载类
2009/09/30 PHP
php把数组值转换成键的方法
2015/07/13 PHP
PHP正则匹配日期和时间(时间戳转换)的实例代码
2016/12/14 PHP
PHP进制转换实例分析(2,8,16,36,64进制至10进制相互转换)
2017/02/04 PHP
Extjs中常用表单介绍与应用
2010/06/07 Javascript
Javascript算符的优先级介绍
2013/03/20 Javascript
JQuery实现鼠标滑过显示导航下拉列表
2013/09/12 Javascript
js之ActiveX控件使用说明 new ActiveXObject()
2014/03/03 Javascript
Javascript获取数组中的最大值和最小值的方法汇总
2016/01/01 Javascript
超链接怎么正确调用javascript函数
2016/05/23 Javascript
概述如何实现一个简单的浏览器端js模块加载器
2016/12/07 Javascript
基本DOM节点操作
2017/01/17 Javascript
基于JavaScript实现活动倒计时效果
2017/04/20 Javascript
nodejs的安装使用与npm的介绍
2019/09/11 NodeJs
在vue中根据光标的显示与消失实现下拉列表
2019/09/29 Javascript
[01:02]DOTA2辉夜杯决赛日 CDEC.Y对阵VG赛前花絮
2015/12/27 DOTA
简单介绍Python中的len()函数的使用
2015/04/07 Python
Python实现从URL地址提取文件名的方法
2015/05/15 Python
django 创建过滤器的实例详解
2017/08/14 Python
Python 私有函数的实例详解
2017/09/11 Python
python中join()方法介绍
2018/10/11 Python
Python下利用BeautifulSoup解析HTML的实现
2020/01/17 Python
Python使用PyQt5/PySide2编写一个极简的音乐播放器功能
2020/02/07 Python
使用 Python ssh 远程登陆服务器的最佳方案
2020/03/06 Python
基于K.image_data_format() == 'channels_first' 的理解
2020/06/29 Python
Python 使用 PyQt5 开发的关机小工具分享
2020/07/16 Python
详解Python中string模块除去Str还剩下什么
2020/11/30 Python
三星英国官网:Samsung英国
2018/09/25 全球购物
农业资源与环境专业自荐信范文
2013/12/30 职场文书
关于旅游的活动方案
2014/08/15 职场文书
英语三分钟演讲稿
2014/08/19 职场文书
2014报到证办理个人委托书
2014/10/08 职场文书
党员学习新党章思想汇报
2014/10/25 职场文书
标准版个人借条怎么写?以及什么是借条?
2019/08/28 职场文书
详解Redis在SpringBoot工程中的综合应用
2021/10/16 Redis
CSS 左边固定宽右边自适应的6种方法
2022/05/15 HTML / CSS