শর্তাধীন অভিব্যক্তি সহ কৌণিক জেএস এনজি-স্টাইল

Question

আমি আমার সমস্যাটি এইভাবে পরিচালনা করছি:

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

তবে নিয়ামক পক্ষের এই ক্রিয়াকলাপটি এড়ানোর জন্য, আমি এই জাতীয় কিছু করতে পছন্দ করব:

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

কিভাবে আমি এটি করতে পারব?

Comments

আপনি কৌনিকটির কোন সংস্করণ ব্যবহার করছেন? কমপক্ষে 1.1.5 দিয়ে কোনও পরিবর্তন ছাড়াই এটি সম্ভব। ডেমো

— ইয়োশি

আমি ১.০.৮ ব্যবহার করছি :) ওহ খুব খারাপ, সত্যিই তখন আমার আপগ্রেড করার চেষ্টা করা উচিত ... ধন্যবাদ!

— TigrouMeow

যদিও আপনার কোডটি ১.১.৫ সহ কাজ করছে, আপনি প্রস্থের পরিবর্তে অন্য শৈলীর বৈশিষ্ট্যগুলি ব্যবহার করেন (উদাহরণস্বরূপ ফন্ট-আকার) আপনার কোডটি এটিকে পরিবর্তন না করা পর্যন্ত কাজ করবে না: এনজি-স্টাইল = " font 'ফন্ট-আকার' : myObject.value == 'ঠিক আছে'? '20px': '10px'} "(অবশ্যই স্টাইলের সম্পত্তিটি কোট দিয়ে ঘিরে থাকতে হবে)।

— বোর্নটোকোড

আমি জানি না এটি সহায়ক তবে নতুন আগতদের জন্য আপনি কোনও বস্তুর সাথে এনজি স্টাইল ব্যবহার করতে পারেন তবে এই এনজি-স্টাইল = "অবজেক্টবিট? Border 'সীমানা': '1px শক্ত লাল'}: border 'সীমানা': 'কিছুই নেই'}"

— উসমান আই

Answer 1

@ যোশি যেমন বলেছিলেন, কৌণিক 1.1.5 থেকে আপনি কোনও পরিবর্তন ছাড়াই এটি ব্যবহার করতে পারেন।

আপনি কৌনিক <1.1.5 ব্যবহার করে, আপনি এনজি-ক্লাস ব্যবহার করতে পারেন ।

.largeWidth {
    width: 100%;
}

.smallWidth {
    width: 0%;
}

// [...]

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

Comments

ঠিক আছে, ধন্যবাদ! আমি কেবল বিস্মিত হয়েছি যে কোনও ক্লাস ব্যবহার না করে এটি করার কোনও উপায় ছিল কিনা, তবে সমস্ত কিছু সরাসরি টেম্পলে অ্যাঙ্গুলার ব্যবহার করে।

— টিগ্রোমিউ

একাধিক শ্রেণীর নামের জন্য এটি কীভাবে ব্যবহার করবেন?

— থানিগাইনাথন

এবং আমি যদি কৌণিক> 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>

background 'ব্যাকগ্রাউন্ড-রঙ': 'সবুজ' TURN সত্য প্রত্যাবর্তন

বা একই ফলাফল:

<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

একাধিক স্বতন্ত্র শৈলী / শর্তের সাথে আমি কীভাবে এটি সম্পাদন করতে পারি? ধন্যবাদ, দুর্দান্ত উত্তর বিটিডব্লিউ।

— অ্যাডাম প্লোচার

@ আর্থ আপনার উদাহরণটি যাচ্ছেন isTrue এবং {'background-color':'green'} এটি কেবল পরীক্ষা করতে যাচ্ছে isTrueএবং background এটি কীভাবে কাজ করবে তা রাখবেন দয়া করে কাউকে ব্যাখ্যা করুন?

— রজনীশ রাজপুত

@ রজনীশ-রাজপুত এটি পরীক্ষা করতে যাচ্ছেন ট্রু এবং ব্যাকগ্রাউন্ড স্থাপন করুন, green 'ব্যাকগ্রাউন্ড-কালার': 'সবুজ' default ডিফল্টরূপে শৈলীর বস্তু হিসাবে সত্য ফিরে আসে

— আর্থার সিদকিলোভ ২

Answer 3

আপনি এটির মতো এটি অর্জন করতে পারেন:

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

Answer 4

@ জেফ্রেডসিলভা স্পষ্টতই প্রশ্নের সহজ উত্তর পেয়েছে :

এনজি-স্টাইল = "width 'প্রস্থ': (myObject.value == 'ঠিক আছে')? '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>]}, এটি কোথা থেকে এসেছে?

— নেটালেক্স

Answer 5

আপনি যদি প্রকাশের সাথে ব্যবহার করতে চান তবে অনমনীয় উপায়:

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

তবে সবচেয়ে ভাল উপায় হ'ল এনজি-ক্লাস ব্যবহার করা

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

নীচে একাধিক CSS বৈশিষ্ট্য উল্লেখ করা যেতে পারে

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>property সুযোগ সম্পত্তি মান। উদাহরণে:

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

``

এটি CSS সম্পত্তির মানগুলিতে কিছু ক্যালকুলটনের জন্য অনুমতি দেয়।

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%' }"

অন্যথায় এটি কাজ করে না