html - AngularJS ngClass सशर्त




css (7)

NgClass जैसे किसी सशर्त होने के लिए अभिव्यक्ति करने का कोई तरीका है। उदाहरण के लिए, मैंने निम्नलिखित कोशिश की है:

<span ng-class="{test: 'obj.value1 == \'someothervalue\''}">test</span>

इस कोड के साथ समस्या यह है कि कोई बात नहीं क्या obj.value1 है, कक्षा परीक्षण हमेशा तत्व पर लागू होता है। यह कर रहा हूं:

<span ng-class="{test: obj.value2}">test</span>

जब तक obj.value2 एक वास्तविक मूल्य के बराबर नहीं है, कक्षा लागू नहीं है। अब मैं इसे करने के पहले उदाहरण में इस मुद्दे के आसपास काम कर सकता हूं:

<span ng-class="{test: checkValue1()}">test</span>

जहां चेकव्यू 1 फ़ंक्शन इस तरह दिखता है:

$scope.checkValue1 = function() {
  return $scope.obj.value === 'somevalue';
}

मैं बस सोच रहा हूं कि यह कैसे है ngClass काम करना चाहिए। मैं एक कस्टम निर्देश भी बना रहा हूं जहां मैं इस तरह कुछ करना चाहता हूं। हालांकि मुझे अभिव्यक्ति देखने का कोई तरीका नहीं मिल रहा है (और शायद यह असंभव है और इसका कारण यह क्यों काम करता है)।

मेरा मतलब यह दिखाने के लिए यहां एक plnkr है:

http://plnkr.co/edit/iSh0t8swDEyGbh7ylZg2?p=preview


आपका पहला प्रयास लगभग सही था, इसे उद्धरण के बिना काम करना चाहिए।

{test: obj.value1 == 'someothervalue'}

यहाँ एक plnkr

NgClass निर्देश किसी भी अभिव्यक्ति के साथ काम करेगा जो सत्य या झूठी का मूल्यांकन करता है, जावास्क्रिप्ट अभिव्यक्तियों के समान ही है लेकिन कुछ मतभेदों के साथ, आप here बारे में पढ़ सकते हैं। यदि आपका सशर्त बहुत जटिल है, तो आप एक ऐसे फ़ंक्शन का उपयोग कर सकते हैं जो सत्य या झूठी रिटर्न देता है, जैसा आपने अपने तीसरे प्रयास में किया था।

बस पूरक के लिए: आप तार्किक अभिव्यक्तियों का उपयोग तार्किक अभिव्यक्तियों को बनाने के लिए भी कर सकते हैं

ng-class="{'test': obj.value1 == 'someothervalue' || obj.value2 == 'somethingelse'}"

इसे इस्तेमाल करो

<div ng-class="{states}[condition]"></div>

उदाहरण के लिए यदि स्थिति [2 == 2] है, तो राज्य {true: '...', false: '...'} हैं


एनजी-क्लास के साथ फ़ंक्शन का उपयोग करना एक अच्छा विकल्प है जब किसी को उचित सीएसएस वर्ग का निर्णय लेने के लिए जटिल तर्क चलाने पड़ते हैं।

http://jsfiddle.net/ms403Ly8/2/

HTML:

<div ng-app>
  <div ng-controller="testCtrl">
        <div ng-class="getCSSClass()">Testing ng-class using function</div>       
    </div>
</div>

सीएसएस:

.testclass { Background: lightBlue}

जावास्क्रिप्ट :

function testCtrl($scope) {
    $scope.getCSSClass = function() {
     return "testclass ";
  }     
}

एनजी-दोहराना के अंदर एनजी-क्लास का उपयोग करना

<table>
    <tbody>
            <tr ng-repeat="task in todos"
                ng-class="{'warning': task.status == 'Hold' , 'success': task.status == 'Completed',
              'active': task.status == 'Started', 'danger': task.status == 'Pending' } ">
                <td>{{$index + 1}}</td>
                <td>{{task.name}}</td>
                <td>{{task.date|date:'yyyy-MM-dd'}}</td>
                <td>{{task.status}}</td>
            </tr>
    </tbody>
</table>

Task.status में प्रत्येक स्थिति के लिए पंक्ति के लिए एक अलग वर्ग का उपयोग किया जाता है।


कोणीय वाक्यविन्यास का उपयोग करने के लिए : ऑपरेटर का उपयोग करने के लिए ऑपरेटर का उपयोग करना है

<div  ng-class="{ 'clearfix' : row%2==0 }">

पंक्तियों तक clearfix कक्षा जोड़ें। फिर भी अभिव्यक्ति कुछ भी हो सकती है जो सामान्य स्थिति में हो सकती है यदि स्थिति और इसे या तो सत्य या गलत का मूल्यांकन करना चाहिए।


मैं आपको दो विधियों को दिखाने जा रहा हूं जिसके द्वारा आप गतिशील रूप से एनजी-क्लास लागू कर सकते हैं

चरण 1

टर्नरी ऑपरेटर का उपयोग करके

<div ng-class="condition?'class1':'class2'"></div>

उत्पादन

यदि आपकी हालत सच है तो कक्षा 1 आपके तत्व पर लागू होगी अन्यथा कक्षा 2 लागू की जाएगी।

हानि

जब आप रन टाइम पर सशर्त मूल्य बदलने की कोशिश करेंगे तो कक्षा किसी भी तरह से नहीं बदलेगी। इसलिए यदि आपको गतिशील वर्ग परिवर्तन की आवश्यकता है तो मैं आपको चरण 2 के लिए जाने का सुझाव दूंगा।

चरण 2

<div ng-class="{value1:'class1', value2:'class2'}[condition]"></div>

उत्पादन

यदि आपकी स्थिति मान 1 के साथ मेल खाती है तो कक्षा 1 आपके तत्व पर लागू होगी, यदि मान 2 के साथ मेल खाता है तो कक्षा 2 लागू किया जाएगा और इसी तरह। और गतिशील वर्ग परिवर्तन इसके साथ ठीक काम करेगा।

आशा है कि यह आपकी मदद करेगा।


कोणीय जेएस एनजी-क्लास निर्देश में इस कार्यक्षमता प्रदान करते हैं। जिसमें आप हालत डाल सकते हैं और सशर्त कक्षा भी आवंटित कर सकते हैं। आप इसे दो अलग-अलग तरीकों से प्राप्त कर सकते हैं।

श्रेणी 1

<div ng-class="{0:'one', 1:'two',2:'three'}[status]"></div>

इस कोड कक्षा में स्थिति मूल्य के मूल्य के अनुसार लागू किया जाएगा

यदि स्थिति मान 0 है तो कक्षा एक लागू करें

यदि स्थिति मान 1 है तो कक्षा दो लागू करें

यदि स्थिति मान 2 है तो कक्षा तीन लागू करें

टाइप 2

<div ng-class="{1:'test_yes', 0:'test_no'}[status]"></div>

किस वर्ग में स्थिति के मूल्य से लागू किया जाएगा

यदि स्थिति मान 1 या सत्य है तो यह कक्षा test_yes जोड़ देगा

यदि स्थिति मान 0 या झूठा है तो यह कक्षा test_no जोड़ देगा





angularjs