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