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获取下拉列表的值为null的解决方法
Mar 18 Javascript
iframe调用父页面函数示例详解
Jul 17 Javascript
jQuery实现的跨容器无缝拖动效果代码
Jun 21 Javascript
AngularJs Dependency Injection(DI,依赖注入)
Sep 02 Javascript
js前端实现图片懒加载(lazyload)的两种方式
Apr 24 Javascript
JavaScript实现时间表动态效果
Jul 15 Javascript
详解Vue2.0 事件派发与接收
Sep 05 Javascript
基于js中this和event 的区别(详解)
Oct 24 Javascript
vue.js实现只弹一次弹框
Jan 29 Javascript
vue如何根据网站路由判断页面主题色详解
Nov 02 Javascript
layui监听下拉选框选中值变化的方法(包含监听普通下拉选框)
Sep 24 Javascript
vue-router定义元信息meta操作
Dec 07 Vue.js
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
一个简单的域名注册情况查询程序
2006/10/09 PHP
PHP有序表查找之插值查找算法示例
2018/02/10 PHP
tp5(thinkPHP5框架)使用DB实现批量删除功能示例
2019/05/28 PHP
PHP类的自动加载与命名空间用法实例分析
2020/06/05 PHP
jquery attr 设定src中含有&amp;(宏)符号问题的解决方法
2011/07/26 Javascript
两种常用的javascript数组去重方法思路及代码
2013/03/26 Javascript
浅谈javascript构造函数与实例化对象
2015/06/22 Javascript
基于javascript实现页面加载loading效果
2020/09/15 Javascript
基于jquery fly插件实现加入购物车抛物线动画效果
2016/04/05 Javascript
关于session和cookie的简单理解
2016/06/08 Javascript
nodejs遍历文件夹下并操作HTML/CSS/JS/PNG/JPG的方法
2018/11/01 NodeJs
基于vue-cli3+typescript的tsx开发模板搭建过程分享
2020/02/28 Javascript
JQuery复选框全选效果如何实现
2020/05/08 jQuery
[14:03]2017DOTA2亚洲邀请赛开幕式:12神兵演绎水墨中华
2017/04/01 DOTA
[47:04]EG vs RNG 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
python实现清屏的方法
2015/04/30 Python
Python遍历目录中的所有文件的方法
2016/07/08 Python
python if not in 多条件判断代码
2016/09/21 Python
Python中音频处理库pydub的使用教程
2017/06/07 Python
Python中表示字符串的三种方法
2017/09/06 Python
Python实现word2Vec model过程解析
2019/12/16 Python
tensorflow 固定部分参数训练,只训练部分参数的实例
2020/01/20 Python
基于Python爬取fofa网页端数据过程解析
2020/07/13 Python
浅谈CSS3 动画卡顿解决方案
2019/01/02 HTML / CSS
HTML5的hidden属性兼容老浏览器的方法
2014/04/23 HTML / CSS
春节联欢晚会主持词
2014/03/24 职场文书
小学生期末评语
2014/04/21 职场文书
影子教师研修方案
2014/06/14 职场文书
司法局2014法制宣传日活动总结
2014/11/01 职场文书
餐饮店长岗位职责
2015/04/14 职场文书
同意落户证明
2015/06/19 职场文书
2015年秋季运动会加油稿
2015/07/22 职场文书
2015年度工程师评职称工作总结
2015/10/14 职场文书
小学班主任工作经验交流材料
2015/11/02 职场文书
将Python代码打包成.exe可执行文件的完整步骤
2021/05/12 Python
详解OpenCV获取高动态范围(HDR)成像
2022/04/29 Python