2015-09-24 8 views
24

मुझे आश्चर्य है कि कक्षा में एक बार कक्षा के साथ एनजी-क्लास होना संभव है और कक्षा जिसे प्रत्येक पाचन चक्र का मूल्यांकन किया जाता है।एनजी-क्लास एक बार बाध्यकारी

<div ng-class="{'one_time_binded_class': isMonkey(), 'not_one_time_binded_class': isUnicorn()}"></div> 

मैं जानता हूँ कि मैं एक बार ng-class="::{...}" के साथ पूरा एनजी स्तरीय बाध्य कर सकते हैं, लेकिन मेरी जरूरत एक बार करने के लिए है एक विशेष अभिव्यक्ति

बेशक

बाँध, इस बात से काम नहीं करता:

<div ng-class="{'my_static_class': ::isMonkey(), 'my_dynamic_class': isUnicorn()}"></div> 

क्या ऐसा करने का कोई तरीका है?

उत्तर

38

विधि 1:

class="some-class {{::expression ? 'my-class' : ''}}" 

विधि 2:

ng-class="::{'my-class': expression}" 
0

एक तरह से मैं यह कर (अगर मैं पीछा किया है कि तुम क्या कहने की कोशिश कर रहे थे) इस प्रकार है के बारे में सोच सकते हैं ...

.blue{ 
    color: blue; 
} 
.underline{ 
    text-decoration: underline; 
} 
.lineThrough{ 
    text-decoration: line-through; 
} 

<div ng-app ng-controller="myCtrl"> 
    <p ng-class="{'blue': isMonkey()}" class="{{isUnicorn() ? dynamicClass: ''}}">My Text</p> 
    <button ng-click="monkey = !monkey">Monkey</button> 
    <button ng-click="unicorn = !unicorn">Unicorn</button> 
    <button ng-click="toggleClass()">Toggle</button> 
</div> 

function myCtrl($scope) { 
    $scope.dynamicClass = "underline"; 
    $scope.monkey = true; 
    $scope.unicorn = true; 
    $scope.isMonkey = function() { 
     return $scope.monkey; 
    } 
    $scope.isUnicorn = function() { 
     return $scope.unicorn; 
    } 
    $scope.toggleClass = function(){ 
     $scope.dynamicClass = $scope.dynamicClass === "underline"? "lineThrough": "underline"; 
    } 
} 

JSFiddle

+0

अपने जवाब के लिए धन्यवाद, लेकिन मेरे सवाल के बारे में एक बाध्यकारी समय है। 'my_static_class' के लिए अभिव्यक्ति का मूल्यांकन एक बार किया जाता है और 'my_dynamic_class' के लिए अभिव्यक्ति का मूल्यांकन प्रत्येक पाचन चक्र का मूल्यांकन किया जाता है। वर्ग के नाम खराब तरीके से चुने गए हैं ... – frlinw

0

एक बार बाध्यकारी का एक महत्वपूर्ण हिस्सा यह है कि यह 'अभिव्यक्ति' को अनिर्धारित नहीं होने तक बाध्य नहीं किया जाता है। @ifadey द्वारा अब तक का सबसे अच्छा जवाब, उसका विधि 1 एक खाली स्ट्रिंग का मूल्यांकन करता है जब 'अभिव्यक्ति' अपरिभाषित होती है, जो बाध्य होती है। यह अपेक्षित फीचर व्यवहार के विपरीत है। विधि 2 देर से बाध्यकारी परिदृश्य में समान रूप से अनुपयोगी है।

सही ढंग से इस करते हैं, सीधे सेशन के प्रश्न का उत्तर:

class="some-class {{::expression ? 'one-time-class' : undefined}}" 
ng-class="{ 'my-dynamic-class' : expression2 }" 

या अधिक तकनीकी रूप से सही लेकिन बदसूरत:

class="some-class {{::expression ? 'one-time-class' : (expression===undefined ? undefined : '')}}"