कुंजी में पानी का छींटा के साथ ngClass शैली

Question

मुझे उम्मीद है कि यह किसी को स्टाइल के साथ सिरदर्द से बचाता है जो डैश का उपयोग करता है, खासकर जब से बूटस्ट्रैप इतना लोकप्रिय हो गया है।

मैं के माध्यम से कोणीय 1.0.5 का उपयोग कर रहा हूँ

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script>

में ngClass प्रलेखन , उदाहरण के लिए सरल है, लेकिन यह भी कहा गया है अभिव्यक्ति बूलियन मूल्यों को वर्ग के नाम का एक नक्शा हो सकता है। मैं अपने आइकन पर "आइकन-सफेद" शैली का उपयोग करने की कोशिश कर रहा था जैसा कि बूटस्ट्रैप प्रलेखन में दिखाया गया है , जो बूलियन चर पर निर्भर करता है।

<i class="icon-home" ng-class="{icon-white: someBooleanValue}">

ऊपर की लाइन काम नहीं करती है। वर्ग के साथ जोड़ा नहीं है icon-whiteजब someBooleanValueसच है। हालांकि, अगर मैं कुंजी को बदल देता हूं, तो iconWhiteइसे सफलतापूर्वक क्लास वैल्यू की सूची में जोड़ दिया जाता है। एक डैश के साथ एक मूल्य कैसे जोड़ा जाएगा?

Comments

नमस्ते, एसओ में आपका स्वागत है! आपको अपने प्रश्न को एक प्रश्न और एक उत्तर में विभाजित करने के लिए अपडेट करना चाहिए - अपने स्वयं के प्रश्न का उत्तर देना ठीक है, और यदि यह उपयोगी है तो प्रोत्साहित किया गया। इस तरह आप अपने उत्तर को स्वीकार कर सकते हैं, और अन्य लोग यह देख सकते हैं कि प्रश्न का सफल उत्तर है।

— एलेक्स ओसबोर्न

तुम्हारे सुझाव के लिए धन्यवाद!

— फू ल

Answer 1

इधर-उधर हैकिंग के घंटों के बाद, यह पता चला कि पानी का छींटा प्रक्षेपित होता है! उद्धरणों की आवश्यकता है।

<i class="icon-home" ng-class="{'icon-white': someBooleanValue}">

मुझे उम्मीद है कि यह किसी को अपने बालों को फाड़ने से मदद करता है।

अपडेट करें:

एंगुलर के पुराने संस्करणों में, बैकस्लैश का उपयोग करना भी ट्रिक करता है, लेकिन नए संस्करणों में नहीं।

<i class="icon-home" ng-class="{icon\-white: someBooleanValue}">

पूर्व शायद पसंद किया जाता है, क्योंकि आप अपने पसंदीदा संपादक में इसे आसानी से खोज सकते हैं।

Comments

इसके लिए शुक्रिया। मैंने इस पर भी बहुत समय बर्बाद किया है।

— ताना

धन्यवाद!!! मुझे पता था कि यह हो रहा था लेकिन मैं अनिश्चित था कि कैसे हल किया जाए। धन्यवाद!

— मार्क फोर्ड

मैं AngularJS 1.2.3 का उपयोग करता हूं। "\" - मेरे लिए काम नहीं करता है। "''" बहुत अच्छा काम किया।

— bobzsj87

सोच रहा था कि यह मेरे लिए काम क्यों नहीं कर रहा था जब मैं अन्य उदाहरणों का अनुसरण कर रहा था!

— नेवस्टर

$ गुंजाइश.सोमबूलियनवैल्यू = सच

— zloctb

Answer 2

\'icon-white\' साथ ही काम करता है (AngularJS 1.2.7 के साथ)

Comments

यह सबसे अच्छा उत्तर है क्योंकि यह सबसे भविष्य के अनुकूल है और पीछे संगत है

— एरिक स्टाइनबर्न

नमस्ते! @EricSteinborn मैं भविष्य से हूँ, मैं यहाँ आपको चेतावनी देने आया हूँ: यह बिल्कुल भी अनुकूल नहीं है!

— टाइपो

Answer 3

एनजी-क्लास के उपयोग के लिए वैकल्पिक:

    .menu-disabled-true{
color: red;
}
    .menu-disabled-false{
color: green;
}


<div ng-controller="DeathrayMenuController">
<p class=menu-disabled-{{status}}>shanam</p>
 <button ng-click="action()">click me</button>
</div>

<script>



function DeathrayMenuController($scope) {
    $scope.status=true
    $scope.action= function(){
      $scope.status=!$scope.status
    }
}
</script>