কৌনিক জেএসএসে গতিশীলভাবে সিএসএস শৈলী বৈশিষ্ট্য প্রয়োগ করুন

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

— রোহিত

Answer 1

এনজিস্টাইল নির্দেশিকা আপনাকেগতিশীলভাবে এইচটিএমএল উপাদানগুলিতে সিএসএস স্টাইলসেট করতে দেয়।

এক্সপ্রেশন যা এমন কোনও অবজেক্টের সাথে প্রমাণিত হয় যার কীগুলি সিএসএস স্টাইলের নাম এবং মানগুলি সেই সিএসএস কীগুলির সাথে সম্পর্কিত মান। যেহেতু কিছু সিএসএস শৈলীর নাম কোনও সামগ্রীর জন্য বৈধ কী নয়, সেগুলি অবশ্যই উদ্ধৃত করতে হবে।

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

আমি বর্তমান ক্লিক করা উপাদানের মূল ব্যাকগ্রাউন্ড-রঙ পেতে চাই এবং আমি যখন ঘুরে দেখি তখন ব্যাকগ্রাউন্ড-কালার নয়। নীচের ব্যবহারটি আমাকে মূল রঙ নয়, পটভূমির রঙ দেয়; আসল পটভূমির রঙ কীভাবে পাবেন?

— মহেশ

<ডিভি এনজি-স্টাইল = "background 'ব্যাকগ্রাউন্ড-কালার': ডেটা.ব্যাকগ্রাউন্ড কল}"> </ ডিভি> <ডি এন জি-স্টাইল = "{ব্যাকগ্রাউন্ড-কালার: ডেটা.ব্যাকগ্রাউন্ড কালার}"> </div>

— এরিক 2323223 হওয়া উচিত

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

আমি যে না করার পরামর্শ দিচ্ছি, কৌণিক দৃশ্য শৈলী বিবরণ পালন সম্পর্কে সব হয়

— OlivierM

আমি

— এটিরও

আসলে এটি আইই ১১ এ এখনও কাজ করে না, আমি পূর্ববর্তী প্রকল্প থেকে কিছু কোড অনুলিপি করেছিলাম এবং বিভ্রান্ত হয়ে

— পড়েছিলাম

Answer 3

সরাসরি ngStyle ডক্স থেকে :

এক্সপ্রেশন যা এমন কোনও অবজেক্টের সাথে প্রমাণিত হয় যার কীগুলি সিএসএস স্টাইলের নাম এবং মানগুলি সেই সিএসএস কীগুলির সাথে সম্পর্কিত মান।

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

সুতরাং আপনি এটি করতে পারে:

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

আশাকরি এটা সাহায্য করবে!

Comments

হ্যাঁ, আমি দস্তাবেজে দেখেছি, কিন্তু একাধিক নিয়মে কীভাবে এটি অনুবাদ করতে পারি তা আমি দেখতে পেলাম না, এখন আমি দেখতে পাচ্ছি যে এটি সাধারণ সিএসএস সিনট্যাক্স নয় তবে অবজেক্ট সিনট্যাক্স।

— jonhobbs

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>