मैं सशर्त रूप से AngularJS में CSS शैलियाँ कैसे लागू करूँ?

309

Q1। मान लीजिए मैं प्रत्येक "आइटम" के रूप को बदलना चाहता हूं जो कि मुख्य "हटाएं" बटन से पहले हटाने के लिए एक उपयोगकर्ता चिह्न दबाया जाता है। (इस तत्काल दृश्य प्रतिक्रिया को लौकिक की आवश्यकता को समाप्त करना चाहिए "क्या आप सुनिश्चित हैं?" संवाद बॉक्स।) उपयोगकर्ता यह इंगित करने के लिए चेकबॉक्स की जांच करेगा कि कौन से आइटम हटाए जाने चाहिए। यदि कोई चेकबॉक्स अनियंत्रित है, तो वह आइटम वापस अपने सामान्य रूप में वापस आ जाना चाहिए।

CSS स्टाइलिंग को लागू करने या हटाने का सबसे अच्छा तरीका क्या है?

Q2। मान लीजिए कि मैं प्रत्येक उपयोगकर्ता को यह बताने की अनुमति देना चाहता हूं कि मेरी साइट को कैसे प्रस्तुत किया जाए। जैसे, फ़ॉन्ट आकार के एक निश्चित सेट से चयन करें, उपयोगकर्ता-निश्चित अग्रभूमि और पृष्ठभूमि रंग, आदि की अनुमति दें।

उपयोगकर्ता के चयन / इनपुट के लिए सीएसएस स्टाइल लागू करने का सबसे अच्छा तरीका क्या है?

css angularjs

— राज रजोक
स्रोत

उपयोगी लेख Tech-blog.maddyzone.com/javascript/…

— ऋतुराज रतन

485

सीमान्त रूप से / गतिशील रूप से CSS स्टाइलिंग में हेरफेर करने के लिए कोणीय कई अंतर्निहित निर्देश प्रदान करता है:

एनजी-क्लास - सीएसएस शैलियों का सेट स्थिर / समय से पहले ज्ञात होने पर उपयोग करें
एनजी-स्टाइल - तब उपयोग करें जब आप सीएसएस वर्ग को परिभाषित नहीं कर सकते क्योंकि स्टाइल मान गतिशील रूप से बदल सकते हैं। शैली मूल्यों के प्रोग्राम नियंत्रण पर विचार करें।
एनजी-शो और एनजी-छिपाने - यदि आपको केवल कुछ दिखाने या छिपाने की जरूरत है (सीएसएस को संशोधित करता है) का उपयोग करें
एनजी-अगर - संस्करण 1.1.5 में नया, अधिक क्रिया एनजी-स्विच के बजाय का उपयोग करें यदि आपको केवल एक ही स्थिति की जांच करने की आवश्यकता है (डोम को संशोधित करता है)
एनजी-स्विच - कई परस्पर अनन्य एनजी-शो का उपयोग करने के बजाय उपयोग करें (डोम को संशोधित करता है)
एनजी-अक्षम और एनजी-रीडोनली - फार्म तत्व व्यवहार को प्रतिबंधित करने के लिए उपयोग करें
एनजी-चेतन - संस्करण 1.1.4 में नया, CSS3 के बदलाव / एनिमेशन जोड़ने के लिए उपयोग करें

सामान्य "कोणीय तरीका" में एक यूआई तत्व के लिए एक मॉडल / गुंजाइश संपत्ति बांधना शामिल है जो उपयोगकर्ता इनपुट / हेरफेर (यानी, एनजी-मॉडल का उपयोग करेगा) को स्वीकार करेगा, और फिर उस मॉडल की संपत्ति को ऊपर उल्लिखित निर्देशों में से एक में जोड़ देगा।

जब उपयोगकर्ता UI बदलता है, तो कोणीय पृष्ठ पर संबंधित तत्वों को स्वचालित रूप से अपडेट करेगा।

क्यू 1 एनजी-क्लास के लिए एक अच्छे मामले की तरह लगता है - सीएसएस स्टाइलिंग को एक क्लास में कैप्चर किया जा सकता है।

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

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

मान लें कि आपके आइटम कुछ सरणी मॉडल पर एनजी-रिपीट का उपयोग करके प्रदर्शित किए जाते हैं, और जब किसी आइटम के लिए चेकबॉक्स की जांच की जाती है, तो आप pending-deleteकक्षा को लागू करना चाहते हैं :

<div ng-repeat="item in items" ng-class="{'pending-delete': item.checked}">
   ... HTML to display the item ...
   <input type="checkbox" ng-model="item.checked">
</div>

ऊपर, हमने एनजी-क्लास अभिव्यक्ति प्रकार # 3 का उपयोग किया - बूलियन मानों के लिए वर्ग नामों का एक नक्शा / ऑब्जेक्ट।

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

एनजी-शैली एक "अभिव्यक्ति" को स्वीकार करती है जिसे इसका मूल्यांकन करना चाहिए:

CSS मानों के लिए CSS शैली नाम का एक मैप / ऑब्जेक्ट

एक आकस्मिक उदाहरण के लिए, मान लें कि उपयोगकर्ता बैकग्राउंड रंग के लिए टेक्सबॉक्स में एक रंग नाम में टाइप कर सकता है (एक jQuery रंग बीनने वाला व्यक्ति अधिक अच्छा होगा):

<div class="main-body" ng-style="{color: myColor}">
   ...
   <input type="text" ng-model="myColor" placeholder="enter a color name">

उपरोक्त दोनों के लिए फिडल ।

फिडेल में एनजी-शो और एनजी-छिपाने का एक उदाहरण भी शामिल है । यदि एक चेकबॉक्स की जाँच की जाती है, तो पृष्ठभूमि-रंग मोड़ गुलाबी के अलावा, कुछ पाठ दिखाया जाता है। यदि पाठ बॉक्स में 'लाल' दर्ज किया जाता है, तो एक डिव छिपा हो जाता है।

— राज रजोक
स्रोत

यह उत्तर भयानक है! क्या आप मुझे jsfiddle के माध्यम से यह दिखाने के लिए तैयार होंगे कि यदि क्लिक इवेंट बदल रहा था या उस क्षेत्र पर एक वर्ग जोड़ रहा था जो क्लिक किए गए तत्व नहीं था तो क्या अंतर होगा? पृष्ठ पर अन्यत्र कहें।

— तेहरोन

यह उपयोगी लेख है Tech-blog.maddyzone.com/javascript/…

— ऋतुराज रतन

महान अन्वेषक। Btw, क्या तुमने कभी एनजी शैली के लिए कोणीय फिल्टर लागू करने की कोशिश की?

— इवी सांग

मैं Q2 से संबंधित एक अतिरिक्त विकल्प जोड़ने का सुझाव देता हूं जिसे मैंने इस प्रश्न के अपने हालिया उत्तर में जोड़ा है।

— गेविन पामर 14

105

जब मैं एक वर्ग पहले से ही पूरी मेज पर लागू किया गया था (उदाहरण के लिए, विषम रंग के लिए लागू रंग ) के अंदर तालिका तत्वों के अंदर कक्षाएं लगाने पर मुझे समस्याएं मिली हैं <myClass tbody tr:nth-child(even) td>। ऐसा लगता है कि जब आप डेवलपर टूल के साथ तत्व का निरीक्षण करते हैं , तो element.styleकोई शैली असाइन नहीं की गई है। इसलिए उपयोग करने के बजाय ng-class, मैंने उपयोग करने की कोशिश की है ng-style, और इस मामले में, नई सीएसएस विशेषता अंदर दिखाई देती है element.style। यह कोड मेरे लिए बहुत अच्छा काम करता है:

<tr ng-repeat="element in collection">

    [...amazing code...]

    <td ng-style="myvar === 0 && {'background-color': 'red'} ||
                  myvar === 1 && {'background-color': 'green'} ||
                  myvar === 2 && {'background-color': 'yellow'}">{{ myvar }}</td>

    [...more amazing code...]

</tr>

Myvar वह है जिसका मैं मूल्यांकन कर रहा हूं, और प्रत्येक मामले में मैं myvar मूल्य के <td>आधार पर प्रत्येक के लिए एक शैली लागू करता हूं , जो पूरी तालिका के लिए CSS वर्ग द्वारा लागू वर्तमान शैली को अधिलेखित करता है।

अपडेट करें

यदि आप उदाहरण के लिए, किसी पृष्ठ पर या अन्य मामलों में, कक्षा में कक्षा को लागू करना चाहते हैं, तो आप इस संरचना का उपयोग कर सकते हैं:

<li ng-class="{ active: isActive('/route_a') || isActive('/route_b')}">

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

यह सही या सही रिटर्न देने वाले तर्क पर कार्य करता है।

तो पहले उदाहरण में, एनजी-शैली को तीन कथनों द्वारा वातानुकूलित किया गया है। यदि वे सभी झूठे हैं, तो कोई भी शैली लागू नहीं होती है, लेकिन हमारे तर्क का पालन करते हुए, कम से कम एक को लागू किया जा रहा है, इसलिए, तर्क की अभिव्यक्ति जांच करेगी कि कौन सा चर तुलना सही है और क्योंकि एक गैर खाली सरणी हमेशा सही होती है, यह एक सरणी को वापसी के रूप में छोड़ दिया और केवल एक सच के साथ, हम विचार कर रहे हैं या पूरी प्रतिक्रिया के लिए उपयोग कर रहे हैं , शेष शैली को लागू किया जाएगा।

वैसे, मैं आपको फ़ंक्शन देना भूल गया हूँ

$rootScope.isActive = function(viewLocation) {
    return viewLocation === $location.path();
};

नई अपडेट

यहाँ आपके पास कुछ है जो मुझे वास्तव में उपयोगी लगता है। जब आपको एक चर के मूल्य के आधार पर एक वर्ग को लागू करने की आवश्यकता होती है, उदाहरण के लिए, सामग्री के आधार पर एक आइकन div, आप निम्न कोड (बहुत उपयोगी ng-repeat) का उपयोग कर सकते हैं :

<i class="fa" ng-class="{ 'fa-github'   : type === 0,
                          'fa-linkedin' : type === 1,
                          'fa-skype'    : type === 2,
                          'fa-google'   : type === 3 }"></i>

फ़ॉन्ट भयानक से प्रतीक

— Timbergus
स्रोत

क्या एक अजीब वाक्यविन्यास, और& का मतलब होना चाहिए और, किसी भी अन्य ग प्रेरित भाषा की तरह

— पिज़ायोला गोर्गोनज़ोला

3

@PizzaiolaGorgonzola && का मतलब है और || मतलब है या। यह एक चतुर हैक शॉर्ट सर्किट तर्क लगभग का उपयोग कर एक मामले / स्विच बयान के रूप में है ...

— स्टीन जी Strindhaug

धन्यवाद मिटो। मुझे उस विस्तार का एहसास नहीं हुआ।

— टिमबर्गस

नए अपडेट अनुभाग ने एक आकर्षण की तरह काम किया! इसके लिए +1!

— मत्ती

न्यू अपडेट में उल्लिखित एनजी-क्लास के उदाहरण का उपयोग किया, मेरे लिए बहुत अच्छा काम किया। सुंदर चिकना

— ऐसविन

34

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

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

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

मैंने AngularJS + SVG के साथ काम करने पर एक लेख प्रकाशित किया है। यह इस मुद्दे और कई अन्य लोगों के बारे में बात करता है। http://www.codeproject.com/Articles/709340/Implementing-a-Flowchart-with-SVG-and-AngularJS

— एशले डेविस
स्रोत

मुझे 1.1.4 डॉक्स में एनजी-एनटीआर का कोई उल्लेख नहीं दिखता है - क्या आपके पास लिंक है?

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

क्षमा करें, लिंक नहीं है। मुझे इसके बारे में कोणीय मंचों का अनुसरण करते हुए पता चला, हालांकि मुझे सटीक पृष्ठ खेद याद नहीं है।

— एशले डेविस

1

नवीनतम डॉक्स (v1.2) निर्देश पृष्ठng-attr- पर वर्णन करते हैं , अनुभाग ngAttr विशेषता बाइंडिंग ।

— मार्क राजकॉक

1.2 के साथ, यह एक महान जवाब बन जाता है। ng-classआप तर्क प्रदर्शन नहीं करते हैं, लेकिन ng-attr-classकरता है। उन दोनों के पास अपने उपयोग हैं, लेकिन मैं शर्त लगा सकता हूं कि बहुत सारे डेवलपर्स की तलाश होगी ng-attr-class।

— Hylianpuffball

मुझे यह अच्छी तरह से काम करने के लिए मिला जब यहां प्रदान किए गए अन्य समाधान विफल हो गए। धन्यवाद।

— डीपीएस

13

span class="circle circle-{{selectcss(document.Extension)}}">

और कोड

$scope.selectcss = function (data) {
    if (data == '.pdf')
        return 'circle circle-pdf';
    else
        return 'circle circle-small';
};

सीएसएस

.circle-pdf {
    width: 24px;
    height: 24px;
    font-size: 16px;
    font-weight: 700;
    padding-top: 3px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    background-image: url(images/pdf_icon32.png);
}

— नेनाद जेसिक
स्रोत

हमेशा IF शब्द से बचें

— LastTribunal

मैं सीधे वर्ग-विशेषता का उपयोग करने से बचने के लिए प्रोत्साहित करना चाहता हूं। यह इस तत्व पर अन्य प्लगइन्स द्वारा किए गए परिवर्तनों को अधिलेखित कर देगा।

— सिमोनसिमिटी

10

इस समाधान ने मेरे लिए चाल चली

<a ng-style="{true: {paddingLeft: '25px'}, false: {}}[deleteTriggered]">...</a>

— iamtankist
स्रोत

8

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

<div ng-style="myVariable > 100 ? {'color': 'red'} : {'color': 'blue'}"></div>

या ...

<div ng-style="{'color': (myVariable > 100) ? 'red' : 'blue' }"></div>

— Michal-Michalak
स्रोत

1

शायद आप इसे बेहतर पाएंगे: <div ng-style = "{'color': (myVariable> 100)? 'Red': 'blue'}"> </ div>

— Dudi

डूडी, अगर बेहतर नहीं है, बस उपयोगी के रूप में, इसलिए मैंने इसे @ मेकेल के "टर्नरी अभिव्यक्ति" उत्तर में जोड़ा। तुम दोनों का धन्यवाद!

— jbobbins

7

एक और विकल्प जब आपको एक या दो गुणों की सरल सीएसएस शैली की आवश्यकता होती है:

राय:

<tr ng-repeat="element in collection">
    [...amazing code...] 
    <td ng-style="{'background-color': getTrColor(element.myvar)}">
        {{ element.myvar }}
    </td>
    [...more amazing code...]
</tr>

नियंत्रक:

$scope.getTrColor = function (colorIndex) {
    switch(colorIndex){
        case 0: return 'red';
        case 1: return 'green';
        default: return 'yellow';
    }
};

— डूडी
स्रोत

6

निम्न उदाहरण देखें

<!DOCTYPE html>
    <html ng-app>
    <head>
    <title>Demo Changing CSS Classes Conditionally with Angular</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
    <script src="res/js/controllers.js"></script>

    <style>

    .checkboxList {
        border:1px solid #000;
        background-color:#fff;
        color:#000;
        width:300px;
        height: 100px;
        overflow-y: scroll;
    }

    .uncheckedClass {
       background-color:#eeeeee;
       color:black;
    }
    .checkedClass {
        background-color:#3ab44a;
        color:white;
    }
    </style>

    </head>
    <body ng-controller="TeamListCtrl">
    <b>Teams</b>
    <div id="teamCheckboxList" class="checkboxList">

    <div class="uncheckedClass" ng-repeat="team in teams" ng-class="{'checkedClass': team.isChecked, 'uncheckedClass': !team.isChecked}">

    <label>
    <input type="checkbox" ng-model="team.isChecked" />
    <span>{{team.name}}</span>
    </label>
    </div>
    </div>
    </body>
    </html>

— रंगा रेड्डी
स्रोत

2

AngularJS v1.2.0rc के रूप में, ng-classऔर यहां तक कि ng-attr-classएसवीजी तत्वों के साथ विफल (वे पहले काम करते थे, यहां तक कि वर्ग विशेषता के अंदर सामान्य बंधन के साथ)

विशेष रूप से, इनमें से कोई भी काम अब:

ng-class="current==this_element?'active':' ' "
ng-attr-class="{{current==this_element?'active':' '}}"
class="class1 class2 .... {{current==this_element?'active':''}}"

वर्कअराउंड के रूप में, मुझे उपयोग करना है

ng-attr-otherAttr="{{current==this_element?'active':''}}"

और फिर शैली का उपयोग कर

[otherAttr='active'] {
   ... styles ...
}

— kumarharsh
स्रोत

1

सशर्त रूप से शैली को लागू करने का एक और (भविष्य में) तरीका सशर्त रूप से स्कोप शैली बनाना है

<style scoped type="text/css" ng-if="...">

</style>

लेकिन आजकल केवल फायरफॉक्स स्कॉप्ड स्टाइल का समर्थन करता है।

— पावेल वोरोनिन
स्रोत

1

एक और विकल्प है जो मैंने हाल ही में खोजा है कि कुछ लोग उपयोगी हो सकते हैं क्योंकि यह आपको एक शैली तत्व के भीतर सीएसएस नियम को बदलने की अनुमति देता है - इस प्रकार कोणीय शैली, एनजी-क्लास जैसे कोणीय निर्देश के बार-बार उपयोग की आवश्यकता से बचा जाता है, एनजी-शो, एनजी-छिपाने, एनजी-चेतन, और अन्य।

यह विकल्प सेवा चर के साथ एक सेवा का उपयोग करता है जो एक नियंत्रक द्वारा निर्धारित होते हैं और एक विशेषता-निर्देश द्वारा देखे जाते हैं जिसे मैं "कस्टम-स्टाइल" कहता हूं। इस रणनीति का उपयोग कई अलग-अलग तरीकों से किया जा सकता है, और मैंने इस फिडेल के साथ कुछ सामान्य मार्गदर्शन प्रदान करने का प्रयास किया ।

var app = angular.module('myApp', ['ui.bootstrap']);
app.service('MainService', function(){
    var vm = this;
});
app.controller('MainCtrl', function(MainService){
    var vm = this;
    vm.ms = MainService;
});
app.directive('customStyle', function(MainService){
    return {
        restrict : 'A',
        link : function(scope, element, attr){
            var style = angular.element('<style></style>');
            element.append(style);
            scope.$watch(function(){ return MainService.theme; },
                function(){
                    var css = '';
                    angular.forEach(MainService.theme, function(selector, key){
                        angular.forEach(MainService.theme[key], function(val, k){
                            css += key + ' { '+k+' : '+val+'} ';
                        });                        
                    });
                    style.html(css);
                }, true);
        }
    };
});

— गाविन पामर
स्रोत

1

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

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

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

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

— sheelpriy
स्रोत

0

देखने के लिए एक चीज है - अगर CSS शैली में डैश हैं - तो आपको उन्हें अवश्य हटा देना चाहिए। इसलिए यदि आप सेट करना चाहते हैं background-color, तो सही तरीका है:

ng-style="{backgroundColor:myColor}"

— नील मुनरो
स्रोत

5

नहीं, आपको नहीं करना है। एनजी-शैली = "{'पृष्ठभूमि-रंग': myColor}" पूरी तरह से अच्छी तरह से काम करता है।

— गेरासालस

0

यहाँ बताया गया है कि कैसे मैंने अक्षम बटन पर सशर्त रूप से ग्रे टेक्स्ट स्टाइल लागू किया

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  styleUrls: [ './app.component.css' ],
  template: `
  <button 
    (click)='buttonClick1()' 
    [disabled] = "btnDisabled"
    [ngStyle]="{'color': (btnDisabled)? 'gray': 'black'}">
    {{btnText}}
  </button>`
})
export class AppComponent  {
  name = 'Angular';
  btnText = 'Click me';
  btnDisabled = false;
  buttonClick1() {
    this.btnDisabled = true;
    this.btnText = 'you clicked me';
    setTimeout(() => {
      this.btnText = 'click me again';
      this.btnDisabled = false
      }, 5000);
  }
}

यहाँ एक कार्यशील उदाहरण दिया गया है:
https://stackblitz.com/edit/example-conditional-disable-button?file=src%2Fapp%2Fapp.component.html

— BraveNewMath
स्रोत