एनजी-शैली का उपयोग करके एचटीएमएल तत्व चौड़ाई और AngularJS

Question

में प्रतिशत मान सेट करना मेरे पास एक JSON प्रतिक्रिया ऑब्जेक्ट है जिसमें प्रतिशत मान है। उदाहरण के लिए:

{ 
    completionPercent: 42 
} 

यूआई परिणाम मैं के लिए लक्ष्य कर रहा हूँ है:

┌──────────────────────────────────────────────────┐ 
|█████████████████████        | 
└──────────────────────────────────────────────────┘ 

JSON ऑब्जेक्ट AngularJS में एक तत्व की ng-model के रूप में प्रयोग किया जाता है। अब मैं AngularJS में किसी तत्व की चौड़ाई के रूप में completionPercent को बांधना चाहता हूं। लेकिन सीएसएस width एक स्ट्रिंग की अपेक्षा करता है जैसे '42%', संख्या नहीं। वर्तमान में

<div id="progressBackground" ... > 
    <div id="progressBar" 
     ng-model="..." 
     ng-style="{ 'width': completionPercent }" 
     ... ></div> 
</div> 

, मैं इस काम के लिए है नियंत्रक में पूरे शैली उत्पन्न करके:: तो निम्नलिखित काम नहीं करता है

ng-style="getStyleFromCompletionPercent()" 

लेकिन यह एक अच्छा विचार के रूप में यह बहुत हो जाता है नहीं है, ng-style का विस्तार करना मुश्किल है। क्या यह स्पष्ट रूप से निर्दिष्ट करने का एक और तरीका है कि चौड़ाई प्रतिशत में है? कुछ इस तरह आदर्श होगा:

ng-style="{ 'width-percentage': completionPercent }" 

Answer 1

कोड अपने एनजी-शैली विशेषता के भीतर एक जावास्क्रिप्ट वस्तु है, तो आप आप चौड़ाई मूल्य के अंत पर एक प्रतिशत प्रतीक संलग्न कर सकते हैं। चूंकि आप किसी संख्या को स्ट्रिंग जोड़ रहे हैं, यह चौड़ाई के मान को स्ट्रिंग में भी परिवर्तित कर देगा।

<div id="progressBackground" ... > 
    <div id="progressBar" 
     ng-model="..." 
     ng-style="{ 'width': completionPercent + '%' }" 
     ... ></div> 
</div> 

Answer 2

खोजकर्ताओं के लाभ के लिए, यदि आप क्षेत्र को भरने, लेकिन (उदाहरण के लिए, शाब्दिक विस्तार प्रदान करने के लिए) अंत में अंतरिक्ष का एक सा छोड़ने के लिए की जरूरत है, यह निम्नलिखित के समान कुछ के साथ प्राप्त किया जा सकता कोड:

<div ng-style="{'width': 'calc('+completionPercent+'% - 250px)'}">&nbsp;</div> 

जाहिर है, यह केवल CSS3 अनुरूप ब्राउज़र के साथ काम करेगा, लेकिन यह गतिशील रूप से स्केल करता है।