सशर्त रूप से क्लास लगाने का सबसे अच्छा तरीका क्या है?

Question

कहते हैं कि आपके पास एक ऐसा सरणी है जिसे प्रत्येक तत्व के लिए और नियंत्रक नामक एक संपत्ति के ulसाथ प्रदान किया liजाता है selectedIndex। AngularJS में liसूचकांक के साथ एक वर्ग जोड़ने का सबसे अच्छा तरीका क्या होगा selectedIndex?

मैं वर्तमान में (हाथ से) liकोड को डुप्लिकेट कर रहा हूं liऔर टैग में से किसी एक में कक्षा जोड़ रहा हूं और उपयोग कर रहा हूं ng-showऔर प्रति सूचकांक ng-hideकेवल एक दिखाने के लिए li।

Comments

इस प्रश्न के उत्तर बताते हैं कि {{varname}} की तुलना में अधिक अस्थायी है। मुझे इस बात का दस्तावेज़ीकरण कहां मिल सकता है कि क्या अधिक है जैसे कि टेम्पररी ऑपरेटर जैसे विभिन्न रूपों में जोड़े? docs.angularjs.org/guide/templates यह समझाने में नहीं लगता है कि {{varname.fieldname}} के अलावा सशर्त आदि के संदर्भ में क्या प्रदान करता है।

— क्रिस्टोस हेवर्ड

यह मेरे लिए बहुत उपयोगी है, आशा है कि यह आपके लिए काम करेगा- blog.maddyzone.com/javascript/…

— ऋतुराज रतन

Answer 1

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

ng:class="{true:'selected', false:''}[$index==selectedIndex]"

कृपया पुराने सिंटैक्स को कोलन के साथ नोट करें।

सशर्त रूप से कक्षाएं लगाने का एक नया बेहतर तरीका भी है, जैसे:

ng-class="{selected: $index==selectedIndex}"

कोणीय अब उन भावों का समर्थन करता है जो किसी वस्तु को वापस करते हैं। इस ऑब्जेक्ट की प्रत्येक संपत्ति (नाम) को अब एक वर्ग नाम के रूप में माना जाता है और इसके मूल्य के आधार पर लागू किया जाता है।

हालाँकि ये तरीके कार्यात्मक रूप से समान नहीं हैं। यहाँ एक उदाहरण है:

ng-class="{admin:'enabled', moderator:'disabled', '':'hidden'}[user.role]"

इसलिए हम मौजूदा सीएसएस वर्गों को मूल रूप से मॉडल प्रॉपर्टी को क्लास के नाम पर मैप करके पुन: उपयोग कर सकते हैं और उसी समय सीएसएस कक्षाओं को कंट्रोलर कोड से बाहर रख सकते हैं।

Comments

ओपी, जो मैंने कभी देखा है टर्नरी ऑपरेटर को व्यक्त करने का सबसे खराब तरीका हो सकता है। क्या आपने विचार किया ($index==selectedIndex) ? 'selected' : ''?

— मालवियो

@ मालवियो AFAIR, ternary ऑपरेटर v0.9.x में कोणीय भाव के भीतर काम नहीं कर रहा था। यह कमोबेश एक स्विच है।

— orcun

एनजी-क्लास (1/19/2012 के अनुसार) अब एक अभिव्यक्ति का समर्थन करता है जिसे 1 का मूल्यांकन करना चाहिए) अंतरिक्ष-सीमांकित वर्ग नामों की एक स्ट्रिंग, या 2) और कक्षा के नामों की सरणी, या 3) कक्षा का एक नक्शा / ऑब्जेक्ट बूलियन मूल्यों के नाम। तो, 3 का उपयोग करते हुए): एनजी-क्लास = "{चयनित: $ इंडेक्स ==

— चयनितइंडेक्स

धन्यवाद @Mark, BTW कि अब मैंने जाँच की है मैं कह सकता हूँ कि यह विधि v1 में काम कर रही है। यह अभी भी कुछ मामलों में उपयोगी है। ध्यान दें कि ऑब्जेक्ट प्रॉपर्टी के नाम (चाबियाँ) जरूरी सही या गलत नहीं हैं, यह कुछ भी हो सकता है जिसे आप क्लास नाम से मैप करना चाहते हैं।

— orcun

मैं सिर्फ जोड़ना चाहता हूं, मुझे एक समस्या हो रही थी क्योंकि मैं सिंटैक्स का उपयोग कर रहा था {classname: '$index === selectedIndex'} और यह काम नहीं कर रहा था। जब मैंने सब कुछ एक साथ धकेला और === के बजाय == का इस्तेमाल किया। {classname: '$index==selectedIndex'}

— लुकास

Answer 2

एनजी-क्लास एक ऐसी अभिव्यक्ति का समर्थन करता है जिसका या तो मूल्यांकन करना चाहिए

1. अंतरिक्ष-सीमांकित वर्ग नामों की एक स्ट्रिंग, या
2. श्रेणी नामों की एक सरणी, या
3. बुलियन मूल्यों के लिए वर्ग के नाम का एक नक्शा / वस्तु।

तो, फॉर्म 3 का उपयोग करके) हम बस लिख सकते हैं

ng-class="{'selected': $index==selectedIndex}"

यह भी देखें कि मैं AngularJS में CSS शैलियों को सशर्त रूप से कैसे लागू करूं? व्यापक उत्तर के लिए।

---

अद्यतन : कोणीय 1.1.5 ने एक टर्नरी ऑपरेटर के लिए समर्थन जोड़ा है , इसलिए यदि वह निर्माण आपके लिए अधिक परिचित है:

ng-class="($index==selectedIndex) ? 'selected' : ''"

Comments

टर्नरी ऑपरेटरों के लिए +1 (और मुझे अभी एक की आवश्यकता है) लेकिन 1.1। * एक 'अस्थिर रिलीज' है जहां एपीआई बिना नोटिस के परिवर्तन के अधीन है - टाइपिंग के समय के रूप में। 1.0। * स्थिर है, इसलिए मैं अगले महीने 6 महीने के लिए एक परियोजना शुरू करने के लिए और अधिक आरामदायक होगा।

— डेव एवरिट

ng-class="{'selected': $index==selectedIndex}"मेरे लिए काम करता है

— knuhol

Answer 3

मेरी पसंदीदा विधि टर्नरी अभिव्यक्ति का उपयोग कर रही है।

ng-class="condition ? 'trueClass' : 'falseClass'"

नोट: इनक्यूलर के पुराने संस्करण का उपयोग कर रहे हैं, इसके बजाय आपको इसका उपयोग करना चाहिए,

ng-class="condition && 'trueClass' || 'falseClass'"

Comments

इससे मुझे यह अभिव्यक्ति लिखने में मदद मिली ng-class="property.name=='timestamp' ? 'property-timestamp' : 'property-'+{{$index}}":। कोई और तरीका नहीं निकाल सका।

— dduft

मुझे वास्तव में यह पता नहीं चल रहा है कि मेरा स्कॉप्ड बूलियन मोडलफ्लैग क्यों अपडेट नहीं हो रहा है - एनजी-क्लास = "{'बंद': modalFlag, 'open':! ModalFlag}" मैं scoped वेरिएबल / बूलियन के आधार पर या तो बंद या खुला जोड़ने की कोशिश कर रहा हूं! - अगर कोई मेरी मदद कर सकता है तो मैं आपका बहुत आभारी रहूंगा।

— उतरा

यह 1.5 संस्करण के रूप में पेश किया गया था। github.com/angular/angular.js/commit/…

— मुबाशीर कूल

Answer 4

मैं इसे जोड़ूंगा, क्योंकि इनमें से कुछ उत्तर पुराने हैं। यहां बताया गया है कि मैं यह कैसे करता हूं:

<class="ng-class:isSelected">

जहाँ WhereSelected ’एक जावास्क्रिप्ट चर है जिसे स्कूप्ड कोणीय नियंत्रक के भीतर परिभाषित किया गया है।


विशेष रूप से अपने प्रश्न को संबोधित करने के लिए, यहां बताया गया है कि आप इसके साथ एक सूची कैसे तैयार कर सकते हैं:

एचटीएमएल

<div ng-controller="ListCtrl">  
    <li class="ng-class:item.isSelected" ng-repeat="item in list">   
       {{item.name}}
    </li>  
</div>

जे एस

function ListCtrl($scope) {    
    $scope.list = [  
        {"name": "Item 1", "isSelected": "active"},  
        {"name": "Item 2", "isSelected": ""}
    ]
}

देखें: http://jsfiddle.net/tTfWM/

देखें: http://docs.angularjs.org/api/ng.directive:ngClass

Comments

वर्ग के बीच क्या विभिन्न = "एनजी श्रेणी: item.isSelected" और एनजी-वर्ग = "item.isSelected"

— zloctb

ng-class:classNameबनाम के उपयोग पर उत्सुक class="{{className}}"?

— Roi

Answer 5

यहाँ एक बहुत सरल समाधान है:

function MyControl($scope){
    $scope.values = ["a","b","c","d","e","f"];
    $scope.selectedIndex = -1;
    
    $scope.toggleSelect = function(ind){
        if( ind === $scope.selectedIndex ){
            $scope.selectedIndex = -1;
        } else{
            $scope.selectedIndex = ind;
        }
    }
    
    $scope.getClass = function(ind){
        if( ind === $scope.selectedIndex ){
            return "selected";
        } else{
            return "";
        }
    }
       
    $scope.getButtonLabel = function(ind){
        if( ind === $scope.selectedIndex ){
            return "Deselect";
        } else{
            return "Select";
        }
    }
}

.selected {
    color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<div ng-app ng-controller="MyControl">
    <ul>
        <li ng-class="getClass($index)" ng-repeat="value in values" >{{value}} <button ng-click="toggleSelect($index)">{{getButtonLabel($index)}}</button></li>
    </ul>
    <p>Selected: {{selectedIndex}}</p>
</div>

Comments

मैं अत्यधिक अपने सीएसएस सामान के नियंत्रक को साफ रखने की सलाह दूंगा। यह एक ऐसा रास्ता है जिसे आप नीचे नहीं करना चाहते हैं।

— लेविथान

कक्षा के नाम टेम्पलेट में हैं

— केसी

कुछ बिंदु पर, jsfiddle अपने बिलों का भुगतान करने से चूक सकते हैं, या किसी अन्य डोमेन पर जाने का विकल्प चुन सकते हैं, या जिम्मेदार लोग बस से मारे जा सकते हैं (बस फैक्टर भी देखें)। तो क्या मैं आपको यह बताने के लिए कह सकता हूं कि आपके उत्तर के भीतर वह क्या करता है ? स्टैक ओवरफ्लो पर यह भी विहित है।

— सेबस्टियन मच

Answer 6

मुझे हाल ही में इसी तरह की समस्या का सामना करना पड़ा और बस एक सशर्त फ़िल्टर बनाने का निर्णय लिया गया:

  angular.module('myFilters', []).
    /**
     * "if" filter
     * Simple filter useful for conditionally applying CSS classes and decouple
     * view from controller 
     */
    filter('if', function() {
      return function(input, value) {
        if (typeof(input) === 'string') {
          input = [input, ''];
        }
        return value? input[0] : input[1];
      };
    });

यह एक एकल तर्क लेता है, जो या तो 2-तत्व सरणी या स्ट्रिंग है, जो एक सरणी में बदल जाता है जिसे दूसरे तत्व के रूप में एक खाली स्ट्रिंग जोड़ा जाता है:

<li ng-repeat="item in products | filter:search | orderBy:orderProp |
  page:pageNum:pageLength" ng-class="'opened'|if:isOpen(item)">
  ...
</li>

Comments

मुझे सिर्फ एक हाँ के लिए बनाया गया है () एक बूलियन मान 1 ओ 0 के अनुसार रिटर्निंग कक्षाएं 'हाँ' या 'नहीं' फ़िल्टर करें:filter('yesNo', function() { return function(input) { // info('yesNo('+ input +')'); switch(input){ case '1': return ' yes '; break; default: return ' no '; break; } } });

— svassr

एनजी-क्लास बूलियन मूल्यों के लिए क्लास के नाम का एक नक्शा / ऑब्जेक्ट को संभाल सकता है, इसलिए आप बस निम्नलिखित लिख सकते हैं: एनजी-क्लास = "{हां: some_boolean_expression, नहीं: some_other_boolean_expression}" →, एनजी-क्लास = "{हां: इनपुट , नहीं: (इनपुट}} "

— मार्क राजकोक

Answer 7

यदि आप द्विआधारी मूल्यांकन से परे जाना चाहते हैं और अपने सीएसएस को अपने नियंत्रक से बाहर रखते हैं तो आप एक साधारण फ़िल्टर लागू कर सकते हैं जो मानचित्र के खिलाफ इनपुट का मूल्यांकन करता है:

angular.module('myApp.filters, [])
  .filter('switch', function () { 
      return function (input, map) {
          return map[input] || '';
      }; 
  });

यह आपको अपना मार्कअप इस तरह लिखने की अनुमति देता है:

<div ng-class="muppets.star|switch:{'Kermit':'green', 'Miss Piggy': 'pink', 'Animal': 'loud'}">
    ...
</div>

Comments

हाय @ जो, किसी भी विचार कैसे शून्य मूल्यों को संभालने के लिए? अगर मैं इनपुट में अशक्त हो जाता हूं, तो वह अपनी कक्षा का नक्शा नहीं

— बनाएगा

@ user1191559 - आप नक्शे में एक 'डिफ़ॉल्ट' आइटम कर सकते हैं, फिर 'इनपुट' शून्य होने पर उस मान को लौटाएं।

— जोईल

Answer 8

क्या मैं हाल ही में ऐसा कर रहा था:

<input type="password"  placeholder="Enter your password"
ng-class="{true: 'form-control isActive', false: 'isNotActive'}[isShowing]">

isShowingमूल्य है कि मेरे नियंत्रक कि एक बटन और एकल कोष्ठक के बीच भागों के क्लिक के साथ टॉगल हो जाता है पर अपने सीएसएस फ़ाइल में कक्षाएं मैं बनाया स्थित है कर रहे हैं एक मूल्य है।

संपादित करें: मैं यह भी जोड़ना चाहूंगा कि codeschool.com के पास एक नि: शुल्क पाठ्यक्रम है जो Google द्वारा AngularJS पर प्रायोजित किया गया है जो इस सभी सामानों पर जाता है और फिर कुछ। किसी भी चीज के लिए भुगतान करने की आवश्यकता नहीं है, बस एक खाते के लिए साइन अप करें और जा रहे हैं! आप सभी को शुभकामनाएं!

Comments

क्या आप यहां एक फिडेल या अधिक कोड प्रदान कर सकते हैं? है isShowingनियंत्रक तो में एक सरणी?

— काइल पेनेल

मुझे लगता है कि एक बूलियन है

— Mirko

Answer 9

टर्नरी ऑपरेटर को केवल 1.1.5 में कोणीय पार्सर में जोड़ा गया है ।

अब ऐसा करने का सबसे सरल तरीका है:

ng:class="($index==selectedIndex)? 'selected' : ''"

Comments

इसके अलावा: class="otherClass ng-class:($index==selectedIndex)? 'selected' : '';"।

— याचिकाकर्ता

Answer 10

हम हालत के साथ वापसी वर्ग का प्रबंधन करने के लिए एक समारोह बना सकते हैं

<script>
    angular.module('myapp', [])
            .controller('ExampleController', ['$scope', function ($scope) {
                $scope.MyColors = ['It is Red', 'It is Yellow', 'It is Blue', 'It is Green', 'It is Gray'];
                $scope.getClass = function (strValue) {
                    switch(strValue) {
                        case "It is Red":return "Red";break;
                        case "It is Yellow":return "Yellow";break;
                        case "It is Blue":return "Blue";break;
                        case "It is Green":return "Green";break;
                        case "It is Gray":return "Gray";break;
                    }
                }
        }]);
</script>

और तब

<body ng-app="myapp" ng-controller="ExampleController">

<h2>AngularJS ng-class if example</h2>
<ul >
    <li ng-repeat="icolor in MyColors" >
        <p ng-class="[getClass(icolor), 'b']">{{icolor}}</p>
    </li>
</ul>
<hr/>
<p>Other way using : ng-class="{'class1' : expression1, 'class2' : expression2,'class3':expression2,...}"</p>
<ul>
    <li ng-repeat="icolor in MyColors">
        <p ng-class="{'Red':icolor=='It is Red','Yellow':icolor=='It is Yellow','Blue':icolor=='It is Blue','Green':icolor=='It is Green','Gray':icolor=='It is Gray'}" class="b">{{icolor}}</p>
    </li>
</ul>

आप उदाहरण के लिए एनजी श्रेणी में पूर्ण कोड पृष्ठ का उल्लेख कर सकते हैं

Answer 11

मैं कोणीय के लिए नया हूँ, लेकिन यह मेरे मुद्दे को हल करने के लिए मिल गया है:

<i class="icon-download" ng-click="showDetails = ! showDetails" ng-class="{'icon-upload': showDetails}"></i>

यह सशर्त रूप से एक वर्ग पर आधारित एक वर्ग को लागू करेगा। यह एक साथ शुरू होता है आइकन-डाउनलोड एक डिफ़ॉल्ट, एनजी श्रेणी का उपयोग कर के रूप में, मैं की स्थिति की जांच showDetailsकरता है, तो true/falseऔर वर्ग लागू आइकन से अपलोड । इसके काम महान है।

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

Answer 12

यह एक आकर्षण की तरह काम करता है;)

<ul class="nav nav-pills" ng-init="selectedType = 'return'">
    <li role="presentation" ng-class="{'active':selectedType === 'return'}"
        ng-click="selectedType = 'return'"><a href="#return">return

    </a></li>
    <li role="presentation" ng-class="{'active':selectedType === 'oneway'}"
        ng-click="selectedType = 'oneway'"><a href="#oneway">oneway
    </a></li>
</ul>

Answer 13

यह संभवत: गुमनामी में बदल जाएगा, लेकिन यहां बताया गया है कि मैंने वर्गों को स्विच करने के लिए 1.1.5 टर्नरी ऑपरेटरों का उपयोग किया है या नहीं, इस आधार पर कि तालिका में एक पंक्ति पहली, मध्य या अंतिम है - सिवाय इसके कि तालिका में केवल एक पंक्ति है:

<span class="attribute-row" ng-class="(restaurant.Attributes.length === 1) || ($first ? 'attribute-first-row': false || $middle ? 'attribute-middle-row': false || $last ? 'attribute-last-row': false)">
</span>

Answer 14

यह मेरे काम में कई सशर्त न्यायाधीश हैं:

<li ng-repeat='eOption in exam.examOptions' ng-class="exam.examTitle.ANSWER_COM==exam.examTitle.RIGHT_ANSWER?(eOption.eoSequence==exam.examTitle.ANSWER_COM?'right':''):eOption.eoSequence==exam.examTitle.ANSWER_COM?'wrong':eOption.eoSequence==exam.examTitle.RIGHT_ANSWER?'right':''">
  <strong>{{eOption.eoSequence}}</strong> &nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;
  <span ng-bind-html="eOption.eoName | to_trusted">2020 元</span>
</li>

Answer 15

यहाँ एक और विकल्प है जो अच्छी तरह से काम करता है जब एनजी-क्लास का उपयोग नहीं किया जा सकता है (उदाहरण के लिए एसवीजी को स्टाइल करते समय):

ng-attr-class="{{someBoolean && 'class-when-true' || 'class-when-false' }}"

(मुझे लगता है कि आपको एनजी- attr- का उपयोग करने के लिए नवीनतम अस्थिर कोणीय पर होने की आवश्यकता है, मैं वर्तमान में 1.1.4 पर हूं)

Answer 16

अच्छी तरह से मैं आपको सुझाव दूंगा कि आप अपने कंट्रोलर में किसी फंक्शन को सही या गलत बताकर चेक करें ।

<div class="week-wrap" ng-class="{today: getTodayForHighLight(todayDate, day.date)}">{{day.date}}</div>

और अपने नियंत्रक में स्थिति की जांच करें

$scope.getTodayForHighLight = function(today, date){
return (today == date);
}

Answer 17

आंशिक

  <div class="col-md-4 text-right">
      <a ng-class="campaign_range === 'thismonth' ? 'btn btn-blue' :  'btn btn-link'" href="#" ng-click='change_range("thismonth")'>This Month</a>
      <a ng-class="campaign_range === 'all' ? 'btn btn-blue' :  'btn btn-link'" href="#" ng-click='change_range("all")'>All Time</a>
  </div>

नियंत्रक

  $scope.campaign_range = "all";
  $scope.change_range = function(range) { 
        if (range === "all")
        {
            $scope.campaign_range = "all"
        }
        else
        {  
            $scope.campaign_range = "thismonth"
        }
  };

Answer 18

यदि आप कोणीय पूर्व v1.1.5 (अर्थात कोई टर्नरी ऑपरेटर) का उपयोग कर रहे हैं और आप अभी भी दोनों स्थितियों में मूल्य निर्धारित करने के लिए एक समान तरीका चाहते हैं तो आप कुछ इस तरह से कर सकते हैं:

ng-class="{'class1':item.isReadOnly == false, 'class2':item.isReadOnly == true}"

Answer 19

यदि आपके पास एक सामान्य वर्ग है जो कई तत्वों पर लागू होता है, तो आप एक कस्टम निर्देश बना सकते हैं जो उस वर्ग को एनजी-शो / एनजी-हाइड की तरह जोड़ देगा।

यह निर्देश बटन क्लिक करने पर कक्षा को 'सक्रिय' जोड़ देगा

module.directive('ngActive',  ['$animate', function($animate) {
  return function(scope, element, attr) {
    scope.$watch(attr.ngActive, function ngActiveWatchAction(value){
      $animate[value ? 'addClass' : 'removeClass'](element, 'active');
    });
  };
}]);

और जानकारी

Answer 20

बस कुछ है जो आज मेरे लिए काम कर रहा है, बहुत खोज के बाद ...

<div class="form-group" ng-class="{true: 'has-error'}[ctrl.submitted && myForm.myField.$error.required]">

आशा है कि यह आपके सफल विकास में सहायता करता है।

=)

अनिर्दिष्ट अभिव्यक्ति सिंटैक्स: महान वेबसाइट लिंक ... =)

Comments

स्वीकृत उत्तर देखें। यह एक ही काम कर रहा है और अधिक उदाहरण देता है।

— सम्मानTheCode

Answer 21

इसकी जाँच करें ।

कुख्यात AngularJS if|elseबयान !!!
जब मैंने Angularjs का उपयोग करना शुरू किया, तो मुझे थोड़ा आश्चर्य हुआ कि मुझे एक if / else स्टेटमेंट नहीं मिला।

इसलिए मैं एक परियोजना पर काम कर रहा था और मैंने देखा कि अगर / अन्यथा कथन का उपयोग करते समय, स्थिति लोड करते समय दिखाई देती है। इसे ठीक करने के लिए आप एनजी-क्लोक का उपयोग कर सकते हैं।

<div class="ng-cloak">
 <p ng-show="statement">Show this line</span>
 <p ng-hide="statement">Show this line instead</span>
</div>

.ng-cloak { display: none }

धन्यवाद अमदौ

Answer 22

आप इस npm पैकेज का उपयोग कर सकते हैं । यह सब कुछ संभालता है और एक चर या फ़ंक्शन के आधार पर स्थिर और सशर्त वर्गों के लिए विकल्प होता है।

// Support for string arguments
getClassNames('class1', 'class2');

// support for Object
getClassNames({class1: true, class2 : false});

// support for all type of data
getClassNames('class1', 'class2', ['class3', 'class4'], { 
    class5 : function() { return false; },
    class6 : function() { return true; }
});

<div className={getClassNames({class1: true, class2 : false})} />