এনজি-ক্লাস ব্যবহার করে একাধিক ক্লাস যুক্ত করা হচ্ছে

Question

আমাদের একাধিক এনজি-ক্লাস যুক্ত করার জন্য একাধিক অভিব্যক্তি থাকতে পারে?

যেমন।

<div ng-class="{class1: expressionData1, class2: expressionData2}"></div>

যদি হ্যাঁ তবে কেউ উদাহরণস্বরূপ এটি করতে পারেন।

।

Comments

আপনার উদাহরণ যেমন হয় তেমন কাজ করে।

— স্টিভ ক্লিস্টার্স

হ্যাঁ এটি করে, এটি দৃশ্যমান করার জন্য আমাকে কেবল CSS ব্যবহার করা দরকার had আমি এটি নিজের দ্বারা খুঁজে পেয়েছি :)

— আদিত্য শেঠি

@ স্টেভু যা বলেছে .. তা কি রি 8 ... আপনার প্রশ্নের উত্তর

— ইয়াসওয়ানথজিগ

ডেটা 1 এর মানটি কি সাধারণত সত্য / মিথ্যা, বা কিছু স্ট্রিংয়ের মান গ্রহণ করে?

— মার্টিয়ান2049

Answer 1

যখন বিভিন্ন এক্সপ্রেশন মূল্যায়ন করে তখন বিভিন্ন ক্লাস প্রয়োগ করতে true:

<div ng-class="{class1 : expression1, class2 : expression2}">
    Hello World!
</div>

যখন কোনও অভিব্যক্তিটি সত্য ধরে রাখে তখন একাধিক ক্লাস প্রয়োগ করতে:

<!-- notice expression1 used twice -->
<div ng-class="{class1 : expression1, class2 : expression1}">
    Hello World!
</div>

বা বেশ সহজভাবে:

<div ng-class="{'class1 class2' : expression1}">
    Hello World!
</div>

সিএসএস ক্লাসের চারপাশে একক উদ্ধৃতি লক্ষ্য করুন।

Comments

আপনি এনজি-ক্লাস = "class 'ক্লাস 1 ক্লাস 2" এর মত একাধিক ক্লাস পাস করতে পারবেন না: এক্সপ্রেশন 1} "ঠিক এটি পরীক্ষা করে এবং কিছুতেই কাজ করেন নি, সমাধান হিসাবে @ কোডেথার বলেছেন যে" যখন একটি এক্সপ্রেশন সত্য হয়ে যায় তখন একাধিক ক্লাস প্রয়োগ করতে হবে: "যেটি তৈরি হয়েছে কৌশল

— d1jhoni1b

১.২.১6-এ মাল্টি-ক্লাস অপশন ( 'class1 class2': expression) ভাল কাজ করে বলে মনে হচ্ছে, আপনি যদি কোনও ক্লাস পুনরায় ব্যবহার করেন তবে এক্সপ্রেশনটি বিকল্পগুলির মধ্যে টগল হয়ে গেলে তা বাদ দেওয়া হয়। উদাহরণস্বরূপ, 'commonClass class1': expression == true, 'commonClass class2': expression == falseকমনক্লাসের সাথে এক্সপ্রেশনটি সত্য এবং মিথ্যার মধ্যে টগল হওয়ায় হারিয়ে গেছে।

— ব্রায়ানস

@ ব্রায়ানস আমি এরকম কিছু করব:class="commonClass" ng-class={'class1' : expression, 'class2' : !expression}

— সর্বদা

ধন্যবাদ এটি এখন আমি যা পরিকল্পনা করছি তা ঠিক, সিএসএস ঠিক করার জন্য কিছুটা সময় নেওয়া দরকার।

— ব্রায়ানস

কি ng-class="{'class1' : expression1, 'class2':expression1 }"সম্ভব? : আপনি আমার প্রশ্নের দিকে তাকিয়ে মনে করবে stackoverflow.com/questions/25391692/...

— Danger14

Answer 2

টেরিনারি অপারেটর স্বরলিপি জন্য:

<div ng-class="expression1? 'class1 class2' : 'class3 class4'">

Comments

এই আমার জন্য কাজ করে না। <স্প্যান এনজি-ক্লাস = "প্যারামস.আইএসএডমিন? 'ফা ফা-লক এফ -2 এক্স': 'এফ এএফ-আনলক এফ -2 এক্স'"> </ span>। কনসোল ত্রুটি ফেলে দেবে।

— টমমিকিউ

এই পদ্ধতিটি ব্যবহার করে, আমি কি আরও একটি অভিব্যক্তি যুক্ত করতে পারি?

— হাইক নলবন্দিয়ান

@ হাইকনালবান্দন হ্যাঁ আপনি আরও একটি অভিব্যক্তি যোগ করতে পারেন:ng-class="[expression1? 'class1 class2' : 'class3 class4', expression2 ? 'class5' : 'class6']"

— মাহি-ম্যান

Answer 3

হ্যাঁ আপনি এনজি-ক্লাসে একাধিক ক্লাস যুক্ত করতে একাধিক অভিব্যক্তি রাখতে পারেন।

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

<div ng-class="{class1:Result.length==2,class2:Result.length==3}"> Dummy Data </div>

Answer 4

এখানে অন্যান্য উত্তরের একটি অবিশ্বাস্যভাবে শক্তিশালী বিকল্প:

ng-class="[  { key: resulting-class-expression }[ key-matching-expression ], ..  ]"

কিছু উদাহরণ:

১. ডিভের জন্য কেবল 'শ্রেণী 1 শ্রেণি 2 শ্রেণী 3' যুক্ত করুন:

<div ng-class="[{true: 'class1'}[true], {true: 'class2 class3'}[true]]"></div>

২ $ সূচকের উপর নির্ভর করে ডিভের জন্য 'বিজোড়' বা 'সম' শ্রেণি যুক্ত করে:

<div ng-class="[{0:'even', 1:'odd'}[ $index % 2]]"></div>

৩. গতিশীলভাবে div সূচকের উপর ভিত্তি করে প্রতিটি ডিভের জন্য একটি শ্রেণি তৈরি করে

<div ng-class="[{true:'index'+$index}[true]]"></div>

এর $index=5ফলস্বরূপ:

<div class="index5"></div>

আপনি চালাতে পারেন এমন একটি কোড নমুনা এখানে:

var app = angular.module('app', []); 
app.controller('MyCtrl', function($scope){
  $scope.items = 'abcdefg'.split('');
}); 

.odd  { background-color: #eee; }
.even { background-color: #fff; }
.index5 {background-color: #0095ff; color: white; font-weight: bold; }
* { font-family: "Courier New", Courier, monospace; }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>

<div ng-app="app" ng-controller="MyCtrl">
  <div ng-repeat="item in items"
    ng-class="[{true:'index'+$index}[true], {0:'even', 1:'odd'}[ $index % 2 ]]">
    index {{$index}} = "{{item}}" ng-class="{{[{true:'index'+$index}[true], {0:'even', 1:'odd'}[ $index % 2 ]].join(' ')}}"
  </div>
</div>

Comments

জমকালো উত্তর! আমি সবসময় আরও জটিল ng-classনির্দেশাবলীর জন্য ফাংশন ব্যবহার করেছি , যেমন যখন আমার যখন একই উপাদানটিতে একটি ত্রৈমাসিক এবং একটি স্ট্যান্ডার্ড এক্সপ্রেশন প্রয়োগ করা প্রয়োজন তখন। আমি এক্সপ্রেশনের অ্যারে ব্যবহার অন্তর্ভুক্ত করার জন্য গ্রহণযোগ্য উত্তরে একটি সম্পাদনা জমা দিয়েছি।

— ড্যানিয়েল বোনেল

আমি একটি কৌণিক বিশেষজ্ঞ নই, তবে মনে হয় এই [{true:'index'+$index}[true], {0:'even', 1:'odd'}[ $index % 2 ]]নির্মাণটি: এর মতো সরলীকৃত হতে পারে ['index'+$index, {0:'even', 1:'odd'}[ $index % 2 ]]। আমি এটি মাত্র কৌনিক 1.5.9 এ চেষ্টা করেছি এবং এটি কাজ করে :) দুর্দান্ত উত্তরের জন্য ধন্যবাদ!

— ভাদ্পিপ

Answer 5

$scopeকন্ট্রোলারে একটি পদ্ধতি ব্যবহার করে , আপনি গণনা করতে পারবেন কোন ক্লাসে ভিউ আউটপুট করা যায়। শ্রেণীর নাম গণনা করার জন্য যদি আপনার কাছে জটিল যুক্তি থাকে এবং এটি নিয়ামককে স্থানান্তরিত করে এটি আপনার দৃষ্টিতে যুক্তির পরিমাণ হ্রাস করবে: এটি বিশেষত সহজলভ্য:

app.controller('myController', function($scope) {

    $scope.className = function() {

        var className = 'initClass';

        if (condition1())
            className += ' class1';

        if (condition2())
            className += ' class2';

        return className;
    };
});

এবং দৃষ্টিতে, সহজভাবে:

<div ng-class="className()"></div>

Comments

যদি ক্লাসটি রেন্ডারের পরে পরিবর্তন হয়, এনজি-ক্লাসটি এখনও পরিবর্তনের জন্য শুনছে className?

— পুনঃনির্মাণ

আইএমএইচও, সুযোগটি কেবল শর্তটি প্রকাশ করবে । যখন শর্তটি পূরণ হয় তখন ng-কোন শ্রেণিটি ব্যবহার করতে হবে তা নির্ধারণ করার জন্য এটি HTML বাইন্ডিংগুলির উপর নির্ভর করে ।

— Alnitak

এটি ডোম উপাদানগুলিতে শ্রেণীর বৈশিষ্ট্যটিকে ওভাররাইট করে। যদি কেউ এটি ব্যবহার করে তবে তাদের এমন ক্লাসগুলি অন্তর্ভুক্ত করতে হবে যাতে প্রত্যাবর্তনের ক্ষেত্রে শর্তের প্রয়োজন হয় না className।

— ফুয়ুইন

Answer 6

আপনার উদাহরণ কন্ডিশনড ক্লাসগুলির জন্য কাজ করে (শ্রেণীর নামটি expressionDataXসত্য হলে তা প্রদর্শিত হবে ):

<div ng-class="{class1: expressionData1, class2: expressionData2}"></div>

আপনি উপাদানটির ব্যবহারকারীর দ্বারা সরবরাহিত একাধিক ক্লাস যুক্ত করতে পারেন:

<div ng-class="[class1, class2]"></div>

ব্যবহার:

<div class="foo bar" class1="foo" class2="bar"></div>

Comments

আপনি কি জানেন যে দুটি ধরণের টেমপ্লেট একত্রিত করা সম্ভব, অর্থাত শর্তযুক্ত ক্লাস {}এবং ডেটা-বন্ড ক্লাস ব্যবহার করে []?

— jwg

আমি যতদূর জানি এটি সম্ভব নয়। এছাড়াও, ngClassকোনও উপাদানের উপর দুটি নির্দেশনা রাখা সম্ভব নয় ।

— কুখ্যাত

ধন্যবাদ! এটি অন্য কোথাও নিশ্চিত হয়ে গেছে বলে মনে হয়।

— jwg

আপনি অবাক হবেন: <a href="#/u/[[msg.from]]" ng-bind="msg.from" class="name, ng-class:[users[msg.from].nice, users[msg.from].star];" ng-class="{premium: users[msg.from].premium}"></a>এবং আরও: scotch.io/tutorials/ javascript

— the-

: @jwg: আপনি এখানে টেমপ্লেট উত্তর দুই ধরনের একত্রিত করতে পারেন stackoverflow.com/questions/29230732/...

— সতীশ কুমার ভী

Answer 7

এখানে OR ব্যবহার করে একাধিক কৌণিক-ইউআই-রাউটারের রাজ্যের তুলনা করার একটি উদাহরণ রয়েছে অপারেটর:

<li ng-class="
    {
        warning:
            $state.includes('out.pay.code.wrong')
            || $state.includes('out.pay.failed')
        ,
        active:
            $state.includes('out.pay')
    }
">

এটি লি ক্লাসগুলিকে সতর্কতা এবং / অথবা সক্রিয় করবে, শর্তগুলি মেটানো হয়েছে কিনা তার উপর নির্ভর করে।

Comments

আমি সত্যিই মনে করতে পারি না। যদিও এটি যৌক্তিক নয়?

— নাইটেক

আপনার এনজিও-ক্লাস ব্লক থেকে একাধিক ক্লাস প্রয়োগ করা যেতে পারে তা স্পষ্ট করার জন্য আপনাকে ধন্যবাদ, যতক্ষণ না তাদের প্রতিটি শর্ত সন্তুষ্ট থাকে।

— cedricdlb

Answer 8

সক্রিয় এবং অ্যাক্টিভেনু নীচে ক্লাস এবং আইটেমকাউন্ট এবং শোকার্টটি হল এক্সপ্রেশন / বুলিয়ান মান।

ng-class="{'active' : itemCount, 'activemenu' : showCart}"

Answer 9

একাধিক শর্ত সহ

<div ng-class="{'class1' : con1 || can2, 'class2' : con3 && con4}">
Hello World!
</div>

Answer 10

Scotch.io এর জন্য অন্য একটি উপায় খুঁজে পাওয়া যায়

<div ng-repeat="step in steps" class="step-container step" ng-class="[step.status, step.type]" ng-click="onClick(step.type)">

এটি আমার রেফারেন্স ছিল। পাথ

Answer 11

"একাধিক শ্রেণি ব্যবহার করে" নিয়ন্ত্রণ করতে আমরা কোনও ফাংশন তৈরি করতে পারি

সিএসএস

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

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