सीएसएस शैली की विशेषता को गतिशील रूप से कोणीय जेएस में लागू करें

Question

यह एक साधारण समस्या होनी चाहिए, लेकिन मैं इसका समाधान नहीं ढूंढ सकता।

मेरे पास निम्नलिखित मार्कअप हैं:

<div style="width:20px; height:20px; margin-top:10px; border:solid 1px black; background-color:#ff0000;"></div>

मुझे पृष्ठभूमि के रंग की गुंजाइश की आवश्यकता है, इसलिए मैंने यह कोशिश की:

<div style="{width:20px; height:20px; margin-top:10px; border:solid 1px black; background-color:{{data.backgroundCol}};}"></div>

यह काम नहीं किया, इसलिए मैंने कुछ शोध किया और पाया ng-style, लेकिन यह काम नहीं किया, इसलिए मैंने डायनेमिक भाग को बाहर निकालने की कोशिश की और ng-styleइस तरह से शैली को हार्ड-कोडिंग किया ...

<div ng-style="{width:20px; height:20px; margin-top:10px; border:solid 1px black; background-color:#ff0000;}"></div>

और वह भी काम नहीं करता है। क्या मुझे गलतफहमी है कि कैसे ng-styleकाम करता है? वहाँ एक {{data.backgroundCol}}सादे शैली विशेषता में डालने और इसे मूल्य डालने के लिए हो रही है?

Comments

इस लेख को देखें: ecofic.com/about/blog/…

— Rohit

Answer 1

ngStyle निर्देश आपकोHTML शैली में सीएसएस शैली को गतिशील रूपसे सेट करने की अनुमति देता है।

अभिव्यक्ति जो एक ऐसी वस्तु की ओर ले जाती है जिसकी कुंजी सीएसएस शैली के नाम हैं और मान उन सीएसएस कुंजी के लिए संबंधित मान हैं। चूंकि सीएसएस शैली के कुछ नाम किसी वस्तु के लिए मान्य कुंजी नहीं हैं, इसलिए उन्हें उद्धृत किया जाना चाहिए।

ng-style="{color: myColor}"

आपका कोड होगा:

<div ng-style="{'width':'20px', 'height':'20px', 'margin-top':'10px', 'border':'solid 1px black', 'background-color':'#ff0000'}"></div>

यदि आप गुंजाइश चर का उपयोग करना चाहते हैं:

<div ng-style="{'background-color': data.backgroundCol}"></div>

यहाँ एक उदाहरण है जो फ़िडल पर ngStyle, और नीचे चल रहे स्निपेट के साथ कोड का उपयोग करता है:

angular.module('myApp', [])
.controller('MyCtrl', function($scope) {
  $scope.items = [{
      name: 'Misko',
      title: 'Angular creator'
    }, {
      name: 'Igor',
      title: 'Meetup master'
    }, {
      name: 'Vojta',
      title: 'All-around superhero'
    }

  ];
});

.pending-delete {
  background-color: pink
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller='MyCtrl' ng-style="{color: myColor}">

  <input type="text" ng-model="myColor" placeholder="enter a color name">

  <div ng-repeat="item in items" ng-class="{'pending-delete': item.checked}">
    name: {{item.name}}, {{item.title}}
    <input type="checkbox" ng-model="item.checked" />
    <span ng-show="item.checked"/><span>(will be deleted)</span>
  </div>
  <p>
    <div ng-hide="myColor== 'red'">I will hide if the color is set to 'red'.</div>
</div>

Comments

जब मैं मंडराता हूं तो मैं वर्तमान क्लिक किए गए तत्व की मूल पृष्ठभूमि-रंग प्राप्त करना चाहता हूं न कि पृष्ठभूमि-रंग। निम्नलिखित का उपयोग करने से मुझे मूल रंग नहीं होवर बैकग्राउंड कलर मिलता है: $ event.currentTarget.currentStyle.backgroundColor; किसी भी विचार कैसे मूल पृष्ठभूमि रंग पाने के लिए?

— महेश

<div ng-style = "{'background-color': data.backgroundCol}"> </ div> होना चाहिए <div ng-style = "{background-color: data.backgroundCol}"> </ div>

— er222323223

Answer 2

सबसे आसान तरीका शैली के लिए एक फ़ंक्शन को कॉल करना है, और फ़ंक्शन को सही शैली वापस करना है।

<div style="{{functionThatReturnsStyle()}}"></div>

और अपने नियंत्रक में:

$scope.functionThatReturnsStyle = function() {
  var style1 = "width: 300px";
  var style2 = "width: 200px";
  if(condition1)
     return style1;
  if(condition2)
     return style2;
}

Comments

मैं यह सलाह नहीं

— दूंगा

मैं यह भी सिफारिश नहीं है, यह क्रोम जैसे कुछ ब्राउज़रों में ही काम करेगा, लेकिन अगर आप IE 9+ को देखते हैं तो यह काम नहीं करेगा

— imal हैसरंगा परेरा

वास्तव में यह IE11 में अभी भी काम नहीं करता है, मैंने पिछली परियोजना के कुछ कोड की नकल की और जब यह काम नहीं किया तो उलझन में था, पिछली परियोजना क्रोम का उपयोग कर रही थी

— csharpsql

Answer 3

ngStyle डॉक्स से सीधे :

अभिव्यक्ति जो एक ऐसी वस्तु की ओर ले जाती है जिसकी कुंजी सीएसएस शैली के नाम हैं और मान उन सीएसएस कुंजी के लिए संबंधित मान हैं।

<div ng-style="{'width': '20px', 'height': '20px', ...}"></div>

तो आप ऐसा कर सकते हैं:

<div ng-style="{'background-color': data.backgroundCol}"></div>

उम्मीद है की यह मदद करेगा!

Comments

हाँ, मैंने देखा कि डॉक्स में, लेकिन मैं यह नहीं देख सका कि कैसे कई नियमों में अनुवाद किया जाए, अब मैं देख सकता हूँ कि यह सामान्य सीएसएस सिंटैक्स नहीं है, लेकिन ऑब्जेक्ट सिंटैक्स है।

— जोंहोब्स

Answer 4

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

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

Answer 5

मैं कहूंगा कि आपको ऐसी शैलियों को रखना चाहिए जो एक नियमित styleविशेषता में नहीं बदलेंगे , और सशर्त / गुंजाइश शैलियों को एक ng-styleविशेषता में बदल देंगे । इसके अलावा, स्ट्रिंग कुंजी आवश्यक नहीं हैं। हाइफ़न-सीमांकित सीएसएस कुंजियों के लिए, कैमलकेस का उपयोग करें।

<div ng-style="{backgroundColor: data.backgroundCol}" style="width:20px; height:20px; margin-top:10px; border:solid 1px black;"></div>

Answer 6

बस यह करें:

<div ng-style="{'background-color': '{{myColorVariable}}', height: '2rem'}"></div>