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 相关文章推荐
List the Codec Files on a Computer
Jun 11 Javascript
jQuery 常见开发使用技巧总结
Dec 26 Javascript
jquery Easyui快速开发总结
Aug 20 Javascript
纯JavaScript基于notie.js插件实现消息提示特效
Jan 18 Javascript
jQuery实现判断控件是否显示的方法
Jan 11 Javascript
详解Node全局变量global模块
Sep 28 Javascript
在vue中实现简单页面逆传值的方法
Nov 27 Javascript
React注册倒计时功能的实现
Sep 06 Javascript
微信开发之企业付款到银行卡接口开发的示例代码
Sep 18 Javascript
javascript获取元素的计算样式
May 24 Javascript
Vue搭建后台系统需要注意的问题
Nov 08 Javascript
Vue使用虚拟dom进行渲染view的方法
Dec 26 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
超神学院:天使彦公认最美的三个视角,网友:我的天使快下凡吧!
2020/03/02 国漫
深入php-fpm的两种进程管理模式详解
2013/06/03 PHP
PHP冒泡算法详解(递归实现)
2014/11/10 PHP
PHP生成短网址的思路以及实现方法的详解
2019/03/25 PHP
Mootools 1.2教程(21)——类(二)
2009/09/15 Javascript
javascript 用原型继承来实现对象系统
2010/03/22 Javascript
javascript权威指南 学习笔记之变量作用域分享
2011/09/28 Javascript
jquery增加和删除元素的方法
2015/01/14 Javascript
JQuery创建DOM节点的方法
2015/06/11 Javascript
Javascript 是你的高阶函数(高级应用)
2015/06/15 Javascript
node.js cookie-parser 中间件介绍
2016/06/06 Javascript
AngularJS  ng-table插件设置排序
2016/09/21 Javascript
Bootstrap 网站实例之单页营销网站
2016/10/20 Javascript
JavaScript 网页中实现一个计算当年还剩多少时间的倒数计时程序
2017/01/25 Javascript
获取url中用&amp;隔开的参数实例(分享)
2017/05/28 Javascript
Vue.js实现微信过渡动画左右切换效果
2017/06/13 Javascript
详解vuex结合localstorage动态监听storage的变化
2018/05/03 Javascript
vue实现与安卓、IOS交互的方法
2018/11/02 Javascript
vuejs2.0运用原生js实现简单拖拽元素功能
2020/08/21 Javascript
富文本编辑器vue2-editor实现全屏功能
2019/05/26 Javascript
使用Vue.set()方法实现响应式修改数组数据步骤
2019/11/09 Javascript
利用原生JS实现欢乐水果机小游戏
2020/04/23 Javascript
原生小程序封装跑马灯效果
2020/10/21 Javascript
python列表与元组详解实例
2013/11/01 Python
Python程序员开发中常犯的10个错误
2014/07/07 Python
python统计字母、空格、数字等字符个数的实例
2018/06/29 Python
python list转矩阵的实例讲解
2018/08/04 Python
python selenium 查找隐藏元素 自动播放视频功能
2019/07/24 Python
pandas中的数据去重处理的实现方法
2020/02/10 Python
美国排名第一的葡萄酒俱乐部:Firstleaf Wine Club
2020/01/02 全球购物
瑞典最大的儿童用品网上商店:pinkorblue.se
2021/03/09 全球购物
你们项目是如何进行变更控制的
2015/08/26 面试题
实习协议书范本
2014/04/22 职场文书
四风问题个人对照检查剖析材料
2014/09/27 职场文书
2016大学生就业指导课心得体会
2016/01/15 职场文书
Opencv中cv2.floodFill算法的使用
2021/06/18 Python