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 相关文章推荐
javascript div 遮罩层封锁整个页面
Jul 10 Javascript
JavaScript中两种链式调用实现代码
Jan 12 Javascript
对javascript的一点点认识总结《javascript高级程序设计》读书笔记
Nov 30 Javascript
用jquery统计子菜单的条数示例代码
Oct 18 Javascript
JavaScript获得页面base标签中url的方法
Apr 03 Javascript
在JavaScript中处理数组之reverse()方法的使用
Jun 09 Javascript
深入理解JavaScript编程中的原型概念
Jun 25 Javascript
javascript检测flash插件是否被禁用的方法
Jan 14 Javascript
JavaScript编程学习技巧汇总
Feb 21 Javascript
Backbone.js框架中Model与Collection的使用实例
May 07 Javascript
Angular的模块化(代码分享)
Dec 26 Javascript
vue二维数组循环嵌套方式 循环数组、循环嵌套数组
Apr 24 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
php巧获服务器端信息
2006/12/06 PHP
thinkPHP5.0框架自动加载机制分析
2017/03/18 PHP
thinkPHP多表查询及分页功能实现方法示例
2017/07/03 PHP
PHP mysqli事务操作常用方法分析
2017/07/22 PHP
PHP封装curl的调用接口及常用函数详解
2018/05/31 PHP
Some tips of wmi scripting in jscript (1)
2007/04/03 Javascript
基于jQuery的模仿新浪微博时间的组件
2011/10/04 Javascript
javascript实现div的显示和隐藏的小例子
2013/06/25 Javascript
js抽奖实现随机抽奖代码效果
2013/12/02 Javascript
通过url查找a元素应用案例
2014/04/29 Javascript
解释&amp;&amp;和||在javascript中的另类用法
2014/07/28 Javascript
JS获取各种宽度、高度的简单介绍
2014/12/19 Javascript
javascript实现动态加载CSS
2015/01/26 Javascript
JS仿Windows开机启动Loading进度条的方法
2015/02/26 Javascript
js游戏人物上下左右跑步效果代码分享
2015/08/28 Javascript
JavaScript实现横线提示输入验证码随输入验证码输入消失的方法
2016/09/24 Javascript
微信小程序switch开关选择器使用详解
2018/01/31 Javascript
Vue使用枚举类型实现HTML下拉框步骤详解
2018/02/05 Javascript
微信小程序商品详情页的底部弹出框效果
2020/11/16 Javascript
vue内置组件transition简单原理图文详解(小结)
2018/07/12 Javascript
jquery层次选择器的介绍
2019/01/18 jQuery
解决Vue @submit 提交后不刷新页面问题
2020/07/18 Javascript
[02:05]2014DOTA2西雅图邀请赛 专访啸天mik夫妻档
2014/07/08 DOTA
基于python实现在excel中读取与生成随机数写入excel中
2018/01/04 Python
Python Tkinter实现简易计算器功能
2018/01/30 Python
Django框架模板注入操作示例【变量传递到模板】
2018/12/19 Python
python虚拟环境完美部署教程
2019/08/06 Python
Python 使用元类type创建类对象常见应用详解
2019/10/17 Python
Flask框架搭建虚拟环境的步骤分析
2019/12/21 Python
python画环形图的方法
2020/03/25 Python
Python基于unittest实现测试用例执行
2020/11/25 Python
海蓝之谜英国官网:La Mer英国
2020/01/15 全球购物
职业生涯规划书结束语
2014/04/15 职场文书
项目建议书模板
2014/05/12 职场文书
企业领导对照检查材料
2014/08/20 职场文书
nginx搭建NFS网络文件系统
2022/04/14 Servers