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




angularjs (18)

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

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


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

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

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

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

उम्मीद है कि यह आपके सफल विकास में सहायता करता है।

=)

अनियंत्रित अभिव्यक्ति सिंटेक्स: ग्रेट वेबसाइट लिंक ... =)


आंशिक

  <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"
        }
  };

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

<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>

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


ng-class एक अभिव्यक्ति का समर्थन करता है जिसे मूल्यांकन करना चाहिए

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

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

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

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

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

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

http://www.codinginsight.com/angularjs-if-else-statement/ जांचें

कुख्यात angularjs अगर अन्य कथन !!! जब मैंने एंगुलरज का उपयोग करना शुरू किया, तो मुझे आश्चर्य हुआ कि मुझे एक और / कथन नहीं मिला।

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

<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 }

धन्यवाद amadou


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

// 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})} />

यहां एक बहुत आसान समाधान है:

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>


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

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

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

आशा करता हूँ की ये काम करेगा।


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

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

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

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

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

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


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

<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>

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

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

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

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

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

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

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

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

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


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

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

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

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

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

  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>

ठीक है, मैं आपको अपने नियंत्रक में सच्चाई या गलत लौटने वाले फ़ंक्शन के साथ स्थिति की जांच करने का सुझाव दूंगा

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

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

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

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

<class="ng-class:isSelected">

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


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

एचटीएमएल

<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/

देखें: ng-class


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

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

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

और जानकारी





angularjs