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 相关文章推荐
ExtJS4 组件化编程,动态加载,面向对象,Direct
May 12 Javascript
JS操作CSS随机改变网页背景实现思路
Mar 10 Javascript
Bootstrap基本样式学习笔记之标签(5)
Dec 07 Javascript
js实现点击按钮弹出上传文件的窗口
Dec 23 Javascript
JavaScript 实现 Tab 点击切换实例代码
Mar 25 Javascript
Angularjs根据json文件动态生成路由状态的实现方法
Apr 17 Javascript
JS数组操作之增删改查的简单实现
Aug 21 Javascript
Vue2.0+ElementUI实现表格翻页的实例
Oct 23 Javascript
Angular 利用路由跳转到指定页面的指定位置方法
Aug 31 Javascript
微信小程序实现动态列表项的顺序加载动画
Jul 25 Javascript
使用vuex较为优雅的实现一个购物车功能的示例代码
Dec 09 Javascript
Vue watch响应数据实现方法解析
Jul 10 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
1 Tube Radio
2021/03/02 无线电
js window.onload 加载多个函数的方法
2009/11/02 Javascript
jQuery 源码分析笔记(2) 变量列表
2011/05/28 Javascript
弹出层之1:JQuery.Boxy (一) 使用介绍
2011/10/06 Javascript
jQuery 一个图片切换的插件
2011/10/09 Javascript
文本框根据输入内容自适应高度的代码
2011/10/24 Javascript
jquery实现图片灯箱明暗的遮罩效果
2013/11/15 Javascript
jquery解析JSON数据示例代码
2014/03/17 Javascript
一个简单的动态加载js和css的jquery代码
2014/09/01 Javascript
jQuery中:eq()选择器用法实例
2014/12/29 Javascript
JS处理json日期格式化问题
2015/10/01 Javascript
简单讲解AngularJS的Routing路由的定义与使用
2016/03/05 Javascript
jQuery.Callbacks()回调函数队列用法详解
2016/06/14 Javascript
Js得到radiobuttonlist选中值的两种方法(推荐)
2016/08/25 Javascript
bootstrap使用validate实现简单校验功能
2016/12/02 Javascript
AngularJS定时器的使用与移除操作方法【interval与timeout】
2016/12/14 Javascript
Jquery Easyui选项卡组件Tab使用详解(10)
2016/12/18 Javascript
HTML的select控件美化
2017/03/27 Javascript
Angular.JS利用ng-disabled属性和ng-model实现禁用button效果
2017/04/05 Javascript
基于Vue实现页面切换左右滑动效果
2020/06/29 Javascript
原生JS实现的雪花飘落动画效果
2018/05/03 Javascript
[43:32]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS NewBee第一场
2014/05/26 DOTA
寻找网站后台地址的python脚本
2014/09/01 Python
解决Python传递中文参数的问题
2015/08/04 Python
python编写分类决策树的代码
2017/12/21 Python
python FTP批量下载/删除/上传实例
2019/12/22 Python
pytorch对梯度进行可视化进行梯度检查教程
2020/02/04 Python
Python 实现将某一列设置为str类型
2020/07/14 Python
django前端页面下拉选择框默认值设置方式
2020/08/09 Python
北京鼎普科技股份有限公司软件测试面试题
2012/04/07 面试题
如何执行一个shell程序
2012/11/23 面试题
应用电子技术专业个人求职信
2013/09/21 职场文书
物流专业大学生的自我鉴定
2013/11/13 职场文书
个人自我评价分享
2013/12/20 职场文书
交通事故和解协议书
2015/01/27 职场文书
redis复制有可能碰到的问题汇总
2022/04/03 Redis