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




angularjs (15)

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

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


आंशिक

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

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

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

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

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

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

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

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

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

=)

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


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

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

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

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

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

<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


मैंने हाल ही में ऐसा किया था जो यह कर रहा था:

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

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

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


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

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

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

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

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

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

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

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

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

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

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


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

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

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

और जानकारी


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

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

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

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>


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

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

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


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





angularjs