AngularJS ngClass শর্তসাপেক্ষ

Question

ng-classশর্তসাপেক্ষ হওয়ার মতো কোনও কিছুর জন্য কী ভাব প্রকাশ করার কোনও উপায় আছে ?

উদাহরণস্বরূপ, আমি নিম্নলিখিত চেষ্টা করেছি:

<span ng-class="{test: 'obj.value1 == \'someothervalue\''}">test</span>

এই কোডটি নিয়ে সমস্যাটি obj.value1হ'ল শ্রেণি পরীক্ষা সর্বদা উপাদানটিতে প্রয়োগ করা হয়। এটা করছি:

<span ng-class="{test: obj.value2}">test</span>

যতক্ষণ obj.value2না সত্যের মানটির সমান হয় না, ক্লাস প্রয়োগ হয় না। এখন আমি প্রথম কাজটি করে সমস্যাটি নিয়ে কাজ করতে পারি:

<span ng-class="{test: checkValue1()}">test</span>

যেখানে checkValue1ফাংশনটি দেখতে এটির মতো দেখাচ্ছে:

$scope.checkValue1 = function() {
  return $scope.obj.value === 'somevalue';
}

আমি কেবল ভাবছি যে এটি কীভাবে ng-classকাজ করার কথা। আমি একটি কাস্টম নির্দেশিকাও তৈরি করছি যেখানে আমি এর অনুরূপ কিছু করতে চাই। তবে, আমি একটি অভিব্যক্তি দেখার কোনও উপায় খুঁজে পাচ্ছি না (এবং এটি সম্ভবত অসম্ভব এবং এটি কেন এইরকম কাজ করে তার কারণ)।

আমি কী বোঝাতে চাইছি তা এখানে দেখানোর জন্য একটি plnkr ।

Comments

: একটি এই উত্তরটি এ চেহারা আছে stackoverflow.com/questions/14788652/...

— আদ্রিয়ান Neatu

ড্যাশযুক্ত ক্লাসগুলির উদ্ধৃতি দেওয়া দরকার:ng-class="'label-success': obj.value1 == 'Ready', 'label-warning': obj.value1 == 'On hold'}"

— ব্রেন্ট ওয়াশবার্ন

আমরা এনজি-ক্লাসের সাথে আরও শর্ত ব্যবহার করতে পারি, এই ব্লগে goo.gl/qfEQZw দেখুন

— বীরেন্দ্র

সম্পর্কিত: stackoverflow.com/q/7792652/435605

— AlikElzin-kilaka

"ড্যাশযুক্ত ক্লাসগুলির জন্য '' '' '' '"

— রিচার্ড

Answer 1

আপনার প্রথম প্রচেষ্টা প্রায় সঠিক ছিল, এটি উদ্ধৃতিগুলি ছাড়া কাজ করা উচিত।

{test: obj.value1 == 'someothervalue'}

এখানে একটি plnkr ।

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

কেবলমাত্র পরিপূরক হিসাবে: আপনি লজিকাল অপারেটরগুলি যেমন লজিক্যাল এক্সপ্রেশন তৈরি করতে ব্যবহার করতে পারেন

ng-class="{'test': obj.value1 == 'someothervalue' || obj.value2 == 'somethingelse'}"

Comments

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

— রায়ানজেক

'অন্যথায় ক্লাসের নামটি মোড়ানো যদি আপনি আরও ক্লাস যুক্ত করতে চান বা আপনার শ্রেণিতে হাইফেন বা আন্ডারস্কোর থাকে তবে এটি কাজ করবে না work ng-class="{'test test-2: obj.value1 === 'value'}"

— Andrea Turri

@ আন্দ্রেয়া, আপনি সমাপনী উদ্ধৃতিটি ভুলে গেছেন:ng-class="{'test test-2': obj.value1 === 'value'}"

— এরিক

: Angular2 (যা আমি খুঁজে বের করার চেষ্টা করা হয়েছে) ব্যবহার অ্যাট্রিবিউট (গুলি) মত জন্য [class.test]="obj.value1 == 'someotervalue'"।

— kub1x

পাঠকদের কাছে এফওয়াইআই, আপনার কাছে বন্ধনীও থাকতে পারে। ng-class="{danger:!enabled || (type === 'WHEEL' && !isOnline) }

— ডকোদা

Answer 2

এনজি-রিপিটের ভিতরে এনজি-ক্লাস ব্যবহার করা

<table>
    <tbody>
            <tr ng-repeat="task in todos"
                ng-class="{'warning': task.status == 'Hold' , 'success': task.status == 'Completed',
              'active': task.status == 'Started', 'danger': task.status == 'Pending' } ">
                <td>{{$index + 1}}</td>
                <td>{{task.name}}</td>
                <td>{{task.date|date:'yyyy-MM-dd'}}</td>
                <td>{{task.status}}</td>
            </tr>
    </tbody>
</table>

টাস্কে প্রতিটি স্ট্যাটাসের জন্য at

Comments

একাধিক ক্লাস সহ নিখুঁত উদাহরণ, ধন্যবাদ!

— শ্রীকান্ত করিনী

Answer 3

কৌণিক জেএস এনজি-ক্লাসের নির্দেশিকাতে এই কার্যকারিতা সরবরাহ করে । যার মধ্যে আপনি শর্ত রাখতে পারেন এবং শর্তযুক্ত ক্লাসও নির্ধারণ করতে পারেন। আপনি দুটি ভিন্ন উপায়ে এটি অর্জন করতে পারেন।

ধরন 1

<div ng-class="{0:'one', 1:'two',2:'three'}[status]"></div>

এই কোডে স্ট্যাটাস মানের মান অনুযায়ী শ্রেণি প্রয়োগ করা হবে

যদি স্থিতির মান 0 হয় তবে ক্লাস ওয়ান প্রয়োগ করুন

যদি স্থিতির মান 1 হয় তবে ক্লাস টু প্রয়োগ করুন

যদি স্থিতির মান 2 হয় তবে ক্লাস থ্রি প্রয়োগ করুন

---

টাইপ 2

<div ng-class="{1:'test_yes', 0:'test_no'}[status]"></div>

কোন শ্রেণিতে স্থিতির মান দ্বারা প্রয়োগ করা হবে

যদি স্থিতির মান 1 বা সত্য হয় তবে এটি ক্লাসের টেস্ট_ আই যুক্ত করবে

যদি স্থিতির মান 0 বা মিথ্যা হয় তবে এটি ক্লাসের পরীক্ষা_নো যোগ করবে

Comments

এখানে স্ট্যাটাস কি?

— কমনসেন্সকোড

স্ট্যাটাসটি এমন মান যা আপনি যা শ্রেণি প্রয়োগ করা হবে তা অনুসারে যাচাই বা বৈধ করতে চান।

— দক্ষ খামার

একাধিক মান নিয়ে কাজ করার সময় এটি আরও নমনীয় এবং কম উন্মাদ হিসাবে এইভাবে পছন্দ করুন

— এডুয়ার্ডো লা হোজ মিরান্ডা

এটি একাধিক ক্লাসের জন্য কীভাবে ব্যবহার করবেন। পছন্দ করুন, <div ng-class = "{0: 'one', 1: 'two', 2: 'three'} [status], {0: 'one', 1: 'two'} [status1]"> </div>

— parth.hirpara

আমরা কি এরকম ক্ষেত্রে এটি ব্যবহার করতে পারি: <div ng-class="{'Image' || 'image': 'image-icon', 'Video' || 'video' || 'aVideo' || 'bVideo' : 'video-icon'}[resource.type]"></div>

— চন্দ্র কান্ত পালিওয়াল

Answer 4

আমি উপরে দুর্দান্ত উদাহরণগুলি দেখতে পাচ্ছি তবে সেগুলি সমস্ত কোঁকড়ানো বন্ধনী (জেসন ম্যাপ) দিয়ে শুরু হয়। আর একটি বিকল্প গণনার উপর ভিত্তি করে ফলাফল ফেরত দেওয়া। ফলাফলটি CSS শ্রেণীর নামের একটি তালিকা (কেবল মানচিত্র নয়) হতে পারে। উদাহরণ:

ng-class="(status=='active') ? 'enabled' : 'disabled'"

অথবা

ng-class="(status=='active') ? ['enabled'] : ['disabled', 'alik']"

ব্যাখ্যা: স্থিতি সক্রিয় থাকলে, শ্রেণিটি enabledব্যবহার করা হবে। অন্যথায়, ক্লাসdisabled ব্যবহার করা হবে।

তালিকাটি []একাধিক ক্লাস (কেবল একটি নয়) ব্যবহারের জন্য ব্যবহৃত হয়।

Comments

সুদৃশ্য, সমস্ত আশ্চর্যজনক উদাহরণ, তবে আমি আপনাকে সবচেয়ে পছন্দ করি!

— stormec56

Answer 5

একটি সহজ পদ্ধতি রয়েছে যা আপনি এইচটিএমএল শ্রেণির বৈশিষ্ট্য এবং শর্টহ্যান্ডের সাথে / অন্যথায় ব্যবহার করতে পারেন। এটিকে এত জটিল করার দরকার নেই। কেবল নিম্নলিখিত পদ্ধতিটি ব্যবহার করুন।

<div class="{{expression == true ? 'class_if_expression_true' : 'class_if_expression_false' }}">Your Content</div>

হ্যাপি কোডিং, নিমন্ত পেরেরা

Comments

এই লোকটি এটি পেয়েছে ধন্যবাদ কুঁড়ি

— শ্রেনী

Answer 6

আমি আপনাকে দুটি পদ্ধতি প্রদর্শন করতে যাচ্ছি যার মাধ্যমে আপনি এনজি-ক্লাসকে গতিশীলভাবে প্রয়োগ করতে পারেন

ধাপ 1

টার্নারি অপারেটর ব্যবহার করে

<div ng-class="condition?'class1':'class2'"></div>

আউটপুট

যদি আপনার শর্তটি সত্য হয় তবে ক্লাস 1 আপনার উপাদানটিতে প্রয়োগ করা হবে অন্যথায় শ্রেণি 2 প্রয়োগ করা হবে।

অসুবিধা

যখন আপনি রান সময় শর্তসাপেক্ষ মান পরিবর্তন করার চেষ্টা করবেন ক্লাসটি কোনওভাবে পরিবর্তন হবে না h সুতরাং আমি আপনাকে পরামর্শ দিচ্ছি যে আপনার যদি গতিশীল শ্রেণীর পরিবর্তনের মতো প্রয়োজনীয়তা থাকে তবে আপনি স্টেপ 2 এ যাওয়ার পরামর্শ দিন।

ধাপ ২

<div ng-class="{value1:'class1', value2:'class2'}[condition]"></div>

আউটপুট

যদি আপনার শর্ত মান 1 এর সাথে মেলে তবে ক্লাস 1 আপনার উপাদানটির সাথে প্রয়োগ করা হবে, মান 2 এর সাথে মিল থাকলে শ্রেণি 2 প্রয়োগ করা হবে ইত্যাদি। এবং গতিশীল শ্রেণীর পরিবর্তন এটির সাথে কাজ করবে।

আশা করি এটা তোমাকে সাহায্য করবে।

Answer 7

কৌণিক সিনট্যাক্স হ'ল : অপারেটরটি যদি একটি সংশোধকটির সমতুল্য সম্পাদন করতে হয়

<div ng-class="{ 'clearfix' : (row % 2) == 0 }">

এমনকি সারিগুলিতে ক্লিয়ারফিক্স ক্লাস যুক্ত করুন। তবুও, শর্ত থাকলে অভিব্যক্তিটি আমাদের কাছে সাধারণভাবে কিছু হতে পারে এবং এটি সত্য বা মিথ্যা হিসাবে মূল্যায়ন করা উচিত।

Comments

নিস! এছাড়াও, এনজি-রিপিটের ভিতরে আপনি ক্লাস সেট করতে এমনকি ব্যবহার করতে পারেন। যেমন এনজি-ক্লাস = "$ এমনকি? 'এমনকি': 'বিজোড়'"। এনজি-রিপিটের অভ্যন্তরে থাকা অন্যান্য নিফটি বুলগুলি হ'ল $ প্রথম, $ শেষ, $ এমনকি, $ বিজোড় ...

— সর্বোচ্চ

Answer 8

এনজি-ক্লাসের সাথে ফাংশন ব্যবহার করা একটি ভাল বিকল্প যখন উপযুক্ত সিএসএস ক্লাস সিদ্ধান্ত নিতে কেউ জটিল যুক্তি চালাতে হয়।

http://jsfiddle.net/ms403Ly8/2/

এইচটিএমএল:

<div ng-app>
  <div ng-controller="testCtrl">
        <div ng-class="getCSSClass()">Testing ng-class using function</div>       
    </div>
</div>

সিএসএস:

.testclass { Background: lightBlue}

জাভাস্ক্রিপ্ট :

function testCtrl($scope) {
    $scope.getCSSClass = function() {
     return "testclass ";
  }     
}

Comments

আমি মনে করি এটি উদ্বেগের সাথে মিশে গেছে। একটি নিয়ামক আরও বিমূর্ত হতে হবে এবং CSS ক্লাস সম্পর্কে যত্নশীল নয়, বরং রাষ্ট্রীয়। রাজ্যের উপর ভিত্তি করে, টেমপ্লেটে CSS ক্লাস প্রয়োগ করা উচিত। এই নিয়ামকটি টেম্পলেট থেকে স্বতন্ত্র এবং সহজেই পুনরায় ব্যবহারযোগ্য।

— হুবার্ট গ্রেজস্কোইয়াক

Answer 9

এটা ব্যবহার কর

<div ng-class="{states}[condition]"></div>

উদাহরণস্বরূপ শর্তটি যদি [2 == 2] হয় তবে রাষ্ট্রগুলি {সত্য: '...', মিথ্যা: '...'}

<div ng-class="{true: 'ClassA', false: 'ClassB'}[condition]"></div>

Comments

তবে আমার যদি 3 বা তার বেশি শর্ত থাকে তবে এটি কাজ করবে না? যেহেতু এটি কেবল সত্য এবং মিথ্যা উপস্থাপন করবে

— আলী আল আমাইন

অবস্থার অর্থ সত্য বা মিথ্যা। আপনি 2 টিরও বেশি মান সহ কিছু বোঝাতে চাইছেন ?? @ আলেআলামীন

— Saeed

Answer 10

কৌনিক 2 এর জন্য এটি ব্যবহার করুন

<div [ngClass]="{'active': dashboardComponent.selected_menu == 'mapview'}">Content</div>

Comments

এটিকে আরও প্রসারিত করার জন্য, কৌণিক 2 এর জন্য আপনি ক্লাস এবং ক্লাস মডিফায়ার প্রয়োগ করেন যদি / অন্য শর্তসাপেক্ষে এমন অ্যারে ব্যবহার করে:[ngClass]="['base-class', thread.isActive ? 'base-class--active' : '']"

— ম্যাট রাবে

Answer 11

ng-classকোর অ্যাংুলারজেসের একটি নির্দেশিকা। যার মধ্যে আপনি নীচে বর্ণিত "স্ট্রিং সিনট্যাক্স", "অ্যারে সিনট্যাক্স", "মূল্যবান এক্সপ্রেশন", "টার্নারি অপারেটর" এবং আরও অনেক বিকল্প ব্যবহার করতে পারেন:

স্ট্রিং সিনট্যাক্স ব্যবহার করে এনজি ক্লাস

এটি এনজিক্লাস ব্যবহারের সহজতম উপায়। আপনি কেবল এনজি-ক্লাসে একটি কৌণিক ভেরিয়েবল যুক্ত করতে পারেন এবং এটি সেই শ্রেণি যা সেই উপাদানটির জন্য ব্যবহৃত হবে।

<!-- whatever is typed into this input will be used as the class for the div below -->
<input type="text" ng-model="textType">

<!-- the class will be whatever is typed into the input box above -->
<div ng-class="textType">Look! I'm Words!

স্ট্রিং সিনট্যাক্স ব্যবহার করে এনজি ক্লাসের ডেমো উদাহরণ

ngClass অ্যারে সিনট্যাক্স ব্যবহার করে

আপনি একাধিক ক্লাস প্রয়োগ করতে সক্ষম হওয়া ব্যতীত এটি স্ট্রিং সিনট্যাক্স পদ্ধতির মতো।

<!-- both input boxes below will be classes for the div -->
<input type="text" ng-model="styleOne">
<input type="text" ng-model="styleTwo">

<!-- this div will take on both classes from above -->
<div ng-class="[styleOne, styleTwo]">Look! I'm Words!

ngClass মূল্যায়িত এক্সপ্রেশন ব্যবহার করে

এনজিগ্লাস ব্যবহার করার আরও উন্নত পদ্ধতি (এবং এটি সম্ভবত আপনি সবচেয়ে বেশি ব্যবহার করবেন) হ'ল একটি এক্সপ্রেশনকে মূল্যায়ন করা। এটি যেভাবে কাজ করে তা হ'ল যদি কোনও ভেরিয়েবল বা এক্সপ্রেশন মূল্যায়ন করে তবে trueআপনি একটি নির্দিষ্ট শ্রেণি প্রয়োগ করতে পারেন। যদি তা না হয় তবে ক্লাস প্রয়োগ করা হবে না।

<!-- input box to toggle a variable to true or false -->
<input type="checkbox" ng-model="awesome"> Are You Awesome?
<input type="checkbox" ng-model="giant"> Are You a Giant?

<!-- add the class 'text-success' if the variable 'awesome' is true -->
<div ng-class="{ 'text-success': awesome, 'text-large': giant }">

মূল্যায়িত এক্সপ্রেশন ব্যবহার করে এনজি ক্লাসের উদাহরণ

ngClass মান ব্যবহার করে

আপনি কেবলমাত্র একমাত্র ভেরিয়েবলের সাথে একাধিক মানের তুলনা করতে সক্ষম হওয়া ব্যতীত এটি মূল্যায়িত এক্সপ্রেশন পদ্ধতির অনুরূপ।

<div ng-class="{value1:'class1', value2:'class2'}[condition]"></div>

ngClass টার্নারি অপারেটর ব্যবহার করে

টেরিনারি অপারেটর আমাদের দুটি ভিন্ন শ্রেণি নির্দিষ্ট করার জন্য শর্টহ্যান্ড ব্যবহার করতে দেয়, একটি যদি অভিব্যক্তিটি সত্য হয় এবং একটি মিথ্যা বলে। এখানে টার্নারি অপারেটরের জন্য প্রাথমিক বাক্য গঠন:

ng-class="$variableToEvaluate ? 'class-if-true' : 'class-if-false'">

প্রথম, শেষ বা নির্দিষ্ট নম্বর মূল্যায়ন করা

আপনি ব্যবহার করে থাকেন ngRepeatনির্দেশ এবং আপনাকে শ্রেণীর প্রয়োগ করতে চান first, last, বা একটি নির্দিষ্ট তালিকায় নম্বর, তোমাদের মধ্যে বিশেষ বৈশিষ্ট্য ব্যবহার করতে পারেন ngRepeat। এর মধ্যে আছে $first, $last, $even, $odd, এবং কয়েক অন্যদের। এগুলি কীভাবে ব্যবহার করতে হয় তার একটি উদাহরণ এখানে।

<!-- add a class to the first item -->
<ul>
  <li ng-class="{ 'text-success': $first }" ng-repeat="item in items">{{ item.name }}</li>
</ul>

<!-- add a class to the last item -->
<ul>
  <li ng-class="{ 'text-danger': $last }" ng-repeat="item in items">{{ item.name }}</li>
</ul>

<!-- add a class to the even items and a different class to the odd items -->
<ul>
  <li ng-class="{ 'text-info': $even, 'text-danger': $odd }" ng-repeat="item in items">{{ item.name }}</li>
</ul>