AngularJS ng-style中使用filter
更新時間：2016年09月21日 09:12:11 作者：飛將軍
這篇文章主要介紹了AngularJS ng-style中使用filter的相關(guān)資料,需要的朋友可以參考下
問題原因:
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的值了, 但界面已經(jīng)不能自動更新了導致的.
正確的寫法:
<div class="progress">
<div class="bar bar-success"
ng-style="{'width': (user.used | percent:user.total)}"></div>
</div>
總結(jié)
因為ng-style是angular自己的指令, 它會監(jiān)聽user的變化, 并輸出層div的style屬性, 所以是正確的.
注意, 在ng-style中使用filter: (user.used | percent: user.total)
以上就是對AngularJS ng-style的資料整理，后續(xù)繼續(xù)補充相關(guān)資料，謝謝大家對本站的支持！
相關(guān)文章
這篇文章主要介紹了Angular使用Md5加密的解決方法,需要的朋友可以參考下2017-09-09
AngularJS 監(jiān)聽變量變化的實現(xiàn)方法
今天小編就為大家分享一篇AngularJS 監(jiān)聽變量變化的實現(xiàn)方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-10-10
Angularjs在360兼容模式下取數(shù)據(jù)緩存問題的解決辦法
這篇文章主要為大家詳細介紹了Angularjs在360兼容模式下取數(shù)據(jù)緩存問題的解決辦法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
解決angularjs service中依賴注入$scope報錯的問題
今天小編就為大家分享一篇解決angularjs service中依賴注入$scope報錯的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-10-10
這篇文章主要介紹了Angular.js去除頁面中顯示的空行方法，文中給出了詳細的示例代碼供大家參考學習，相信對大家具有一定的參考價值，需要的朋友們下面來一起看看吧。2017-03-03
這篇文章主要介紹了AngularJS基礎(chǔ)知識筆記之表格的相關(guān)資料,需要的朋友可以參考下2015-05-05
Angular5中調(diào)用第三方j(luò)s插件的方法
下面小編就為大家分享一篇Angular5中調(diào)用第三方j(luò)s插件的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
Angularjs 實現(xiàn)移動端在線測評效果(推薦)
這篇文章主要介紹了Angularjs 實現(xiàn)移動端在線測評效果,需要的朋友可以參考下2017-04-04
本文主要講解了Angular的路由動畫和高階動畫函數(shù)，對此感興趣的同學，可以把代碼親自實驗一下，理解其原理。2021-05-05
這篇文章主要介紹了AngularJS 的$timeout服務(wù)示例代碼,需要的朋友可以參考下2017-09-09