কৌণিক জেএস এনজি-শ্রেণি যদি-অন্যরকম প্রকাশ

Question

সঙ্গে AngularJSআমি ব্যবহার করছি ng-classনিম্নলিখিত পদ্ধতিতে:

<div class="bigIcon" data-ng-click="PickUp()" 
ng-class="{first:'classA', second:'classB', third:'classC', fourth:'classC'}[call.State]"/>

আমি ভাবছি যে আমি এই জাতীয় কিছু করতে এই if-elseভাবটি ব্যবহার করতে পারি:

<div class="bigIcon" data-ng-click="PickUp()" 
ng-class="{first:'classA', second:'classB', else:'classC'}[call.State]"/>

সুতরাং যখনই call.Stateপৃথক firstবা secondব্যবহার classCএবং প্রতিটি মান নির্দিষ্ট করে এড়ানো?

Answer 1

যদি নেস্টেড ইনলাইন ব্যবহার করে তবে-পরে বিবৃতিগুলি ( টার্নারি অপারেটর )

<div ng-class=" ... ? 'class-1' : ( ... ? 'class-2' : 'class-3')">

উদাহরণ স্বরূপ :

<div ng-class="apt.name.length >= 15 ? 'col-md-12' : (apt.name.length >= 10 ? 'col-md-6' : 'col-md-4')">
    ...
</div>

এবং নিশ্চিত করুন যে এটি আপনার সহকর্মীদের দ্বারা পঠনযোগ্য :)

Comments

আমার যদি দুটি ক্লাস যুক্ত করার দরকার হয়?

— মিরোকোবাণী

দুঃখিত, আমি বোঝাতে চাইছি "এটি যদি একটি সংঘর্ষ এবং যদি অন্য শ্রেণি হয়"। দুই শ্রেণি, দুটি ভিন্ন শর্ত।

— মিরকোবাবিনী

@ মির্চোবাবিনি, ng-class="{'class1': ##condition1## , 'class2': ##condition2## }"যেমন আপনি উপরের প্রশ্নে দেখতে পারেন

— জোসেফ হারুশ

এটি আমি দেখার মতো দেখতে চাই না। দেখার জন্য অনেক বেশি যুক্তিযুক্ত।

— আতুরস্যামস

@ জেহেলভিয়ন আমাকে একমত হতে হবে না এটি দেখার যুক্তি। আপনি আপনার নিয়ামক বা কোনও পরিষেবার মধ্যে কোন কলামের ক্লাস ব্যবহার করবেন তা নির্দেশ করতে চাইবেন না this এটি এখানেই হওয়া উচিত।

— নিক

Answer 2

আপনি যেমন একটি ফাংশন ব্যবহার করে চেষ্টা করতে পারেন:

<div ng-class='whatClassIsIt(call.State)'>

তারপরে আপনার যুক্তিটি ফাংশনে নিজেই রাখুন:

    $scope.whatClassIsIt= function(someValue){
     if(someValue=="first")
            return "ClassA"
     else if(someValue=="second")
         return "ClassB";
     else
         return "ClassC";
    }

আমি একটি উদাহরণ দিয়ে একটি ঝাঁকুনি তৈরি করেছি: http://jsfiddle.net/DotDotDot/nMk6M/

Comments

নেস্টেড টেরিনারি অপারেটরদের চেয়ে এটি অনেক ভাল সমাধান

— ডেভিড বলেছেন রিনস্টেট মনিকা

এটা ভাল। এটি এইচটিএমএলকে সাধারণ এনজি-ক্লাসের শর্তসাপেক্ষের তুলনায় আরও পরিষ্কার রাখে।

— mrgnw

এই পদ্ধতির সাথে সমস্যা এখন আপনি সিএসএস ক্লাস সম্পর্কে নিয়ামককে সচেতন করছেন। একটি ভাল পদ্ধতির না। নিয়ামকটিতে একটি ভেরিয়েবল সেট থাকা এবং তারপরে ভেরিয়েবল থেকে এইচটিএমএলে কোন ক্লাসটি ব্যবহার করতে হবে তা নির্ধারণ করা আরও ভাল সমাধান।

— ভিটিওকর্লিয়ন

এটি আপনি কীভাবে এটি করতে পারেন তার একটি ইঙ্গিত মাত্র, এই সমস্যাটি ত্রিনিয়ার অপারেটরের সাথে মোকাবিলা করার পক্ষে যথেষ্ট সহজ ছিল, তবে যখন আপনার আরও যুক্তির প্রয়োজন হয় আপনি সরাসরি এইচটিএমএলটিতে এটি করতে চান না, দ্রুত সমাধানগুলির মধ্যে একটি হ'ল যেমনটি আমি করেছি, তার জন্য আপনার কন্ট্রোলারে কোনও ফাংশন ব্যবহার করতে (আপনি যদি কন্ট্রোলারটি সিএসএস সম্পর্কে সচেতন না চান তবে আপনিও স্কোপ ভেরিয়েবলটি দেখতে এবং সেট করতে পারেন এবং সেই মানটির উপর ভিত্তি করে এইচটিএমএলটিতে একটি শর্ত ব্যবহার করতে পারেন) )। তবে, আপনার যদি আরও কিছু যুক্তিযুক্ত বা অনেকগুলি পুনরাবৃত্তি থাকে তবে এটি একটি নির্দেশিকায় রাখুন, এটি পরিষ্কার হওয়া উচিত। উদাহরণটি বেশিরভাগই এইচটিএমএলে যুক্তি স্থাপন না করা সম্পর্কে ছিল

— ডটডটডট

টার্নারি অপারেটরগুলির চেয়ে ভাল যদি আপনি 2 বা 3 বিভিন্ন শ্রেণির বেশি শর্ত যুক্ত করতে চান, যুক্তি দিয়ে এইচটিএমএল আলাদা করুন :)

— থো ভো

Answer 3

আমার এমন পরিস্থিতি হয়েছিল যেখানে আমার দুটি 'যদি' বিবৃতি দরকার যে দুটি সত্যই হতে পারে এবং 'অন্য' বা দুটি সত্যই না হলে ডিফল্ট, জোসেফের উত্তরের এটি কোনও উন্নতি কিনা তা নিশ্চিত নই তবে এটি আমার কাছে পরিষ্কার মনে হয়েছিল:

ng-class="{'class-one' : value.one , 'class-two' : value.two}" class="else-class"

যেখানে value.one এবং value.tw দুটি সত্য, তারা .else- শ্রেণীর চেয়ে বেশি নজরে নেয়

Answer 4

স্পষ্টতই ! আমরা সম্পূর্ণরূপে উদাহরণ সহ একটি সিএসএস শ্রেণীর নাম ফেরত দিতে একটি ফাংশন করতে পারি।

সিএসএস

<style>
    .Red {
        color: Red;
    }
    .Yellow {
        color: Yellow;
    }
      .Blue {
        color: Blue;
    }
      .Green {
        color: Green;
    }
    .Gray {
        color: Gray;
    }
     .b{
         font-weight: bold;
    }
</style>

জাতীয়

<script>
    angular.module('myapp', [])
            .controller('ExampleController', ['$scope', function ($scope) {
                $scope.MyColors = ['It is Red', 'It is Yellow', 'It is Blue', 'It is Green', 'It is Gray'];
                $scope.getClass = function (strValue) {
                    if (strValue == ("It is Red"))
                        return "Red";
                    else if (strValue == ("It is Yellow"))
                        return "Yellow";
                    else if (strValue == ("It is Blue"))
                        return "Blue";
                    else if (strValue == ("It is Green"))
                        return "Green";
                    else if (strValue == ("It is Gray"))
                        return "Gray";
                }
        }]);
</script>

এবং তারপর

<body ng-app="myapp" ng-controller="ExampleController">

<h2>AngularJS ng-class if example</h2>
<ul >
    <li ng-repeat="icolor in MyColors" >
        <p ng-class="[getClass(icolor), 'b']">{{icolor}}</p>
    </li>
</ul>
<hr/>
<p>Other way using : ng-class="{'class1' : expression1, 'class2' : expression2,'class3':expression2,...}"</p>
<ul>
    <li ng-repeat="icolor in MyColors">
        <p ng-class="{'Red':icolor=='It is Red','Yellow':icolor=='It is Yellow','Blue':icolor=='It is Blue','Green':icolor=='It is Green','Gray':icolor=='It is Gray'}" class="b">{{icolor}}</p>
    </li>
</ul>

উদাহরণস্বরূপ আপনি এনজি-ক্লাসে সম্পূর্ণ কোড পৃষ্ঠাটি উল্লেখ করতে পারেন

Answer 5

উপরের সমাধানগুলি আমার জন্য কোনওভাবে পটভূমির চিত্র সহ ক্লাসে কাজ করে না। আমি যা করেছি তা হ'ল আমি একটি ডিফল্ট শ্রেণি তৈরি করলাম (অন্য যেটির জন্য আপনার প্রয়োজন) এবং ক্লাস = 'ডিফল্টক্লাস' সেট করুন এবং তারপরে এনজি-শ্রেণি = "{শ্রেণি 1: অ্যাবিসি, শ্রেণি 2: xyz}"

<span class="booking_warning" ng-class="{ process_success: booking.bookingStatus == 'BOOKING_COMPLETED' || booking.bookingStatus == 'BOOKING_PROCESSED', booking_info: booking.bookingStatus == 'INSTANT_BOOKING_REQUEST_RECEIVED' || booking.bookingStatus == 'BOOKING_PENDING'}"> <strong>{{booking.bookingStatus}}</strong> </span>

পিএস: যে ক্লাসগুলির শর্ত রয়েছে তাদের ডিফল্ট ক্লাসটি ওভাররাইড করা উচিত, হিসাবে চিহ্নিত!

Answer 6

এটি করার সর্বোত্তম এবং নির্ভরযোগ্য উপায়। এখানে একটি সাধারণ উদাহরণ এবং এর পরে আপনি আপনার কাস্টম যুক্তি বিকাশ করতে পারেন:

//In .ts
public showUploadButton:boolean = false;

if(some logic)
{
    //your logic
    showUploadButton = true;
}

//In template
<button [class]="showUploadButton ? 'btn btn-default': 'btn btn-info'">Upload</button>

Answer 7

আমার এক কর্মক্ষেত্রটি হ'ল কেবল এনজি-ক্লাস টগলিংয়ের জন্য একটি মডেল ভেরিয়েবল হেরফের করা:

উদাহরণস্বরূপ, আমি আমার তালিকার রাজ্য অনুযায়ী ক্লাস টগল করতে চাই:

1) যখনই আমার তালিকা খালি থাকে, আমি আমার মডেলটি আপডেট করি:

$scope.extract = function(removeItemId) {
    $scope.list= jQuery.grep($scope.list, function(item){return item.id != removeItemId});
    if (!$scope.list.length) {
        $scope.liststate = "empty";
    }
}

2) যখনই আমার তালিকা খালি নয়, আমি অন্য একটি রাজ্য সেট করি

$scope.extract = function(item) {
    $scope.list.push(item);
    $scope.liststate = "notempty";
}

3) যখন আমার তালিকাটি কখনও স্পর্শ না করা হয়, তখন আমি অন্য একটি শ্রেণি দিতে চাই (এটি এখানে পৃষ্ঠাটি শুরু করা হয়েছে):

$scope.liststate = "init";

3) আমি আমার এনজি-ক্লাসে এই অতিরিক্ত মডেলটি ব্যবহার করি:

ng-class="{'bg-empty': liststate == 'empty', 'bg-notempty': liststate == 'notempty', 'bg-init': liststate = 'init'}"

Answer 8

এটি এইভাবে ব্যবহার করুন:

    <div [ngClass]="{cssClass A: condition 1, cssClass B: condition 2, cssClass C: condition 3}">...</div>

Answer 9

আপনি এই পদ্ধতিটি চেষ্টা করতে পারেন:

</p><br /><br />
<p>ng-class="{test: obj.value1 == 'someothervalue' || obj.value2 == 'somethingelse'}<br /><br /><br />

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

আপনি এখান থেকে সম্পূর্ণ বিবরণ পেতে পারেন ।