एक सशर्त अभिव्यक्ति के साथ एनगुलरजेएस एनजी-शैली

Question

मैं इस तरह से अपने मुद्दे को संभाल रहा हूं:

ng-style="{ width: getTheValue() }"

लेकिन कंट्रोलर की ओर से इस फ़ंक्शन को करने से बचने के लिए, मैं इस तरह से कुछ करना पसंद करूंगा:

ng-style="{ width: myObject.value == 'ok' ? '100%' : '0%' }"

मैं यह कैसे कर सकता हूँ?

Comments

आप कोणीय के किस संस्करण का उपयोग कर रहे हैं? कम से कम 1.1.5 के साथ यह बिना किसी बदलाव के संभव है। डेमो

— योशी

मैं 1.0.8 का उपयोग कर रहा हूं :) ओह बहुत बुरा है, मुझे वास्तव में तब अपग्रेड करने की कोशिश करनी चाहिए ... धन्यवाद!

— तिग्राउमेव

हालाँकि, 1.1.5 के साथ आपका कोड काम कर रहा है, यदि आप चौड़ाई के बजाय अन्य शैली के गुणों का उपयोग करते हैं (उदाहरण के लिए फ़ॉन्ट-आकार) तो आपका कोड तब तक काम नहीं करेगा जब तक आप इसे बदलकर: ng-style = "{ 'font-size' : myObject.value == 'ok'? '20px': '10px'} "" (उद्धरण के साथ शैली गुण को अवश्य देखें)।

— बॉर्नटोडकोड

मैं नहीं जानता कि यह मददगार है लेकिन नए कामर्स के लिए आप किसी वस्तु के साथ एनजी शैली का उपयोग कर सकते हैं, लेकिन इस एनजी-शैली की तरह = "ऑब्जेक्टबीट? {'बॉर्डर': '1 पीएक्स सॉलिड रेड'}: {'बॉर्डर': 'नो'}"

— उस्मान I

Answer 1

जैसा कि @ योशी ने कहा, कोणीय 1.1.5 से आप इसे बिना किसी बदलाव के उपयोग कर सकते हैं।

यदि आप कोणीय <1.1.5 का उपयोग करते हैं, तो आप एनजी-क्लास का उपयोग कर सकते हैं ।

.largeWidth {
    width: 100%;
}

.smallWidth {
    width: 0%;
}

// [...]

ng-class="{largeWidth: myVar == 'ok', smallWidth: myVar != 'ok'}"

Comments

ठीक है शुक्रिया! मुझे आश्चर्य हुआ कि क्या कोई वर्ग का उपयोग किए बिना इसे करने का एक तरीका था, लेकिन सब कुछ सीधे टेम्पलेट पर कोणीय का उपयोग करना।

— तिग्राउमेव

एक से अधिक वर्ग नामों के लिए इसका उपयोग कैसे करें?

— थानीगैनाथन 20

और अगर मैं कोणीय> 1.1.5 का उपयोग कर रहा हूँ?

— बीती

यह बिल्कुल सवाल का जवाब नहीं है।

— ली

यह प्रश्न शाब्दिक रूप से एनजी-शैली के साथ एक उदाहरण के लिए पूछता है और 100+ वोटों के साथ स्वीकृत उत्तर प्रदान नहीं करता है।

— जॉली

Answer 2

सरल उदाहरण:

<div ng-style="isTrue && {'background-color':'green'} || {'background-color': 'blue'}" style="width:200px;height:100px;border:1px solid gray;"></div>

{{पृष्ठभूमि-रंग ':' हरा '} RETURN सच

या एक ही परिणाम:

<div ng-style="isTrue && {'background-color':'green'}" style="width:200px;height:100px;border:1px solid gray;background-color: blue"></div>

अन्य सशर्त संभावना:

<div ng-style="count === 0 && {'background-color':'green'}  || count === 1 && {'background-color':'yellow'}" style="width:200px;height:100px;border:1px solid gray;background-color: blue"></div>

Comments

मैं इसे कैसे पूरा कर सकता हूं लेकिन कई स्वतंत्र शैलियों / स्थितियों के साथ? धन्यवाद, महान जवाब btw।

— एडम प्लॉकर

@ अस्त्र आपके उदाहरण की जाँच करने जा रहा है isTrue और {'background-color':'green'} यह केवल जाँच करने जा रहा है isTrueऔर background यह काम करेगा कि यह किसी को कैसे समझाएगा?

— रजनीश राजपूत

@ रजनीश-राजपूत यह जाँच करने के लिए जा रहा है और पृष्ठभूमि में डाल दिया, {'पृष्ठभूमि-रंग': 'हरा'} डिफ़ॉल्ट रूप से एक शैली वस्तु के रूप में सही

— आर्थर Tsidkilov

Answer 3

आप इसे इस तरह हासिल कर सकते हैं:

ng-style="{ 'width' : (myObject.value == 'ok') ? '100%' : '0%' }"

Answer 4

@jfredsilva के पास स्पष्ट रूप से इस प्रश्न का सबसे सरल उत्तर है :

एनजी-शैली = "{'चौड़ाई': (myObject.value == 'ok')?" 100% ':' 0% '} "

हालाँकि, आप वास्तव में कुछ अधिक जटिल के लिए मेरे जवाब पर विचार करना चाह सकते हैं।

टेर्नरी जैसा उदाहरण:

<p ng-style="{width: {true:'100%',false:'0%'}[myObject.value == 'ok']}"></p>

कुछ और जटिल:

<p ng-style="{
   color:       {blueish: 'blue', greenish: 'green'}[ color ], 
  'font-size':  {0: '12px', 1: '18px', 2: '26px'}[ zoom ]
}">Test</p>

यदि $scope.color == 'blueish', रंग 'नीला' होगा।

यदि $scope.zoom == 2, फ़ॉन्ट-आकार 26px होगा।

angular.module('app',[]);
function MyCtrl($scope) {
  $scope.color = 'blueish';
  $scope.zoom = 2;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<div ng-app="app" ng-controller="MyCtrl" ng-style="{
   color:       {blueish: 'blue', greenish: 'green'}[ color ], 
  'font-size':  {0: '12px', 1: '18px', 2: '26px'}[ zoom ]
}">
  color = {{color}}<br>
  zoom = {{zoom}}
</div>

Comments

दिलचस्प वाक्यविन्यास {<value>:'<string>'}[<$scope.var>]}, यह कहाँ से आता है?

— netalex

Answer 5

यदि आप अभिव्यक्ति के साथ उपयोग करना चाहते हैं, तो कठोरता तरीका है:

<span class="ng-style: yourCondition && {color:'red'};">Sample Text</span>

लेकिन सबसे अच्छा तरीका ng-class का उपयोग कर रहा है

Comments

Syntax Error: Token '%3A' is%20an%20unexpected%20token at column 9 of the expression [ng-style%3A%...

— जेड। खुल्ला

Answer 6

एक सामान्य नोट पर, आप पृष्ठभूमि छवि में परिवर्तन के साथ सशर्त परिवर्तनों का संयोजन ng-ifऔर उपयोग कर सकते हैं ng-style।

<span ng-if="selectedItem==item.id"
              ng-style="{'background-image':'url(../images/'+'{{item.id}}'+'_active.png)','background-size':'52px 57px','padding-top':'70px','background-repeat':'no-repeat','background-position': 'center'}"></span>
        <span ng-if="selectedItem!=item.id"
              ng-style="{'background-image':'url(../images/'+'{{item.id}}'+'_deactivated.png)','background-size':'52px 57px','padding-top':'70px','background-repeat':'no-repeat','background-position': 'center'}"></span>

Comments

यह Uncaught Error: Template parse errors: Can't bind to 'ng-style' since it isn't a known property of 'div'मेरे लिए त्रुटि का कारण बना

— सर्ज सगन

Answer 7

एकल सीएसएस संपत्ति के लिए

ng-style="1==1 && {'color':'red'}"

नीचे कई सीएसएस गुणों के लिए संदर्भित किया जा सकता है

ng-style="1==1 && {'color':'red','font-style': 'italic'}"

अपनी स्थिति अभिव्यक्ति के साथ 1 == 1 बदलें

Answer 8

टर्नररी ऑपरेटर के लिए यह सिंटैक्स भी काम करेगा:

  ng-style="<$scope.var><condition> ? {
        '<css-prop-1>':((<value>) / (<value2>)*100)+'%',
        '<css-prop-2>':'<string>'
      } : {
        '<css-prop-1>':'<string>',
        '<css-prop-2>':'<string>'
      }"

<value>$ गुंजाइश संपत्ति मूल्य कहां हैं। उदाहरण में:

ng-style="column.histograms.value=>0 ? 
  {
    'width':((column.histograms.value) / (column.histograms.limit)*100)+'%',
    'background':'#F03040'
  } : {
    'width':'1px',
    'background':'#2E92FA'
  }"

`` `

यह सीएसएस संपत्ति मूल्यों में कुछ गणनाओं के लिए अनुमति देता है।

Answer 9

मैं कई और स्वतंत्र स्थितियों के लिए नीचे की तरह काम कर रहा हूं और यह आकर्षण की तरह काम करता है:

<div ng-style="{{valueFromJS}} === 'Hello' ? {'color': 'red'} : {'color': ''} && valueFromNG-Repeat === '{{dayOfToday}}' ? {'font-weight': 'bold'} : {'font-weight': 'normal'}"></div>

Answer 10

मैं शैली जोड़ने के लिए एनजी-क्लास का उपयोग कर रहा हूं: -

 ng-class="column.label=='Description'  ? 'tableStyle':                     
           column.label == 'Markdown Type' ? 'Mtype' : 
           column.label == 'Coupon Number' ? 'couponNur' :  ''
           "

शैली देने के लिए कोणीय.जेएस में गैर -श्रेणी निर्देशों के साथ-साथ टर्नरी ऑपरेटर का उपयोग करना । फिर .css या .scss फ़ाइल में वर्ग के लिए शैली परिभाषित करें । जैसे: -

.Mtype{
       width: 90px !important;
       min-width: 90px !important;
       max-width: 90px !important;
      }
.tableStyle{
         width: 129px !important;
         min-width: 129px !important;
         max-width: 129px !important;
}
.couponNur{
         width: 250px !important;
         min-width: 250px !important;
         max-width: 250px !important;
}

Answer 11

यह सुनिश्चित नहीं है कि यह आप लोगों के लिए कैसे काम करता है, लेकिन कोणीय 9 पर मुझे इस तरह से कोष्ठक में लपेटना होगा:

[ng-style]="{ 'width' : (myObject.value == 'ok') ? '100%' : '0%' }"

अन्यथा यह काम नहीं करता है