angularjs - angular 7 tutorial




একটি শর্তাধীন অভিব্যক্তি সঙ্গে কৌণিক এনজি স্টাইল (7)

আমি আমার মত সমস্যাটি পরিচালনা করছি:

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

কিন্তু নিয়ামক পার্শ্ব এই ফাংশন এড়াতে, আমি অনেক ভালো কিছু করতে পছন্দ করবে:

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

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


@ জেফ্রেডিস্ভা অবশ্যই প্রশ্নটির পক্ষে সর্বাধিক উত্তর দিয়েছেন:

ng-style = "{'width': (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>


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

যদি আপনি কৌণিক <1.1.5 ব্যবহার করেন, আপনি ng-class ব্যবহার করতে পারেন।

.largeWidth {
    width: 100%;
}

.smallWidth {
    width: 0%;
}

// [...]

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

আপনি যদি অভিব্যক্তি ব্যবহার করতে চান, তাহলে এটি হ'ল দুর্ঘটনা:

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

কিন্তু সেরা উপায় এনজি ক্লাস ব্যবহার করা হয়


আমি একাধিক এবং স্বাধীন অবস্থার জন্য নীচের মত করছি এবং এটা কবজ মত কাজ করে:

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

একক CSS সম্পত্তি জন্য

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

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

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

আপনার শর্ত অভিব্যক্তি সঙ্গে 1 == 1 প্রতিস্থাপন করুন


এছাড়াও টার্নারি অপারেটর জন্য এই সিনট্যাক্স কাজ করবে:

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

যেখানে <value> $ scope সম্পত্তি মান হয়। উদাহরণে:

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

``

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


সহজ উদাহরণ:

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

{'পটভূমি-রঙ': 'সবুজ'} সত্য ফিরে আসুন

অথবা একই ফলাফল:

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




angularjs-directive