শর্তাধীন কোনও ক্লাস প্রয়োগ করার সর্বোত্তম উপায় কী?

Question

আসুন আপনাকে বলুন যে আপনার কাছে এমন একটি অ্যারে রয়েছে যা প্রতিটি উপাদানগুলির জন্য একটি এবং কন্ট্রোলার নামে পরিচিত একটি বৈশিষ্ট্যের ulসাথে একটিতে রেন্ডার হয় । AngularJS এর সূচী সহ কোনও শ্রেণি যুক্ত করার সর্বোত্তম উপায় কী হবে ?liselectedIndexliselectedIndex

আমি বর্তমানে liকোডটি হস্তান্তরিত করছি (হাতে হাতে) এবং liট্যাগগুলির মধ্যে একটিতে শ্রেণিটি যুক্ত করছি এবং ব্যবহার করছি ng-showএবং প্রতি সূচক অনুযায়ী ng-hideকেবল একটি দেখানোর জন্য li।

Comments

এই প্রশ্নের উত্তরগুলি দেখায় যে la {বর্ণনাম} than এর চেয়ে আরও বেশি টেম্প্লেটিং রয়েছে} টেম্পলারিংয়ের মতো আরও কয়েকটি যেমন ডার্মিনেটর অপারেটরের মতো বিভিন্ন রূপের ডকুমেন্টেশন আমি কোথায় পেতে পারি? docs.angularjs.org/guide/templet condition name varname.fieldname} besides ছাড়াও শর্তসাপেক্ষে শর্তাবলী ইত্যাদিতে কি টেম্প্লেটিং প্রস্তাব দেয় তা ব্যাখ্যা করে বলে মনে হচ্ছে না}

— ক্রিস্টোস হেওয়ার্ড

এই তাই জাউ দরকারী আমার জন্য আশা করি এটা আপনার জন্য কাজ করবে tech-blog.maddyzone.com/javascript/...

— Rituraj রতন

Answer 1

আপনি যদি আমার মত কন্ট্রোলারে সিএসএস ক্লাসের নাম রাখতে চান না, এখানে একটি পুরানো কৌশল যা প্রাক-ভি 1 দিন থেকে আমি ব্যবহার করি। আমরা একটি অভিব্যক্তি লিখতে পারি যা নির্বাচিত শ্রেণীর নামের সাথে সরাসরি মূল্যায়ন করে , কোনও কাস্টম নির্দেশের প্রয়োজন নেই:

ng:class="{true:'selected', false:''}[$index==selectedIndex]"

কোলন সহ পুরানো বাক্য গঠন নোট করুন।

শর্তসাপেক্ষে ক্লাস প্রয়োগের একটি নতুন আরও ভাল উপায় রয়েছে:

ng-class="{selected: $index==selectedIndex}"

কৌণিক এখন এমন অভিব্যক্তি সমর্থন করে যা কোনও বস্তুকে প্রত্যাবর্তন করে। এই বস্তুর প্রতিটি সম্পত্তি (নাম) এখন একটি শ্রেণীর নাম হিসাবে বিবেচিত হয় এবং এর মানের উপর নির্ভর করে প্রয়োগ করা হয়।

তবে এই উপায়গুলি কার্যত সমান নয়। এখানে একটি উদাহরণ:

ng-class="{admin:'enabled', moderator:'disabled', '':'hidden'}[user.role]"

অতএব আমরা মূলত কোনও শ্রেণীর নামের সাথে একটি মডেল সম্পত্তিকে ম্যাপিং করে একই সাথে সিএসএস ক্লাসগুলি নিয়ন্ত্রণকারী কোডের বাইরে রেখে বিদ্যমান সিএসএস ক্লাসগুলি পুনরায় ব্যবহার করতে পারি।

Comments

ওপি, আমার দেখা টার্নারি অপারেটরটি প্রকাশের জন্য এটি সবচেয়ে খারাপ উপায়। আপনি বিবেচনা করেছেন ($index==selectedIndex) ? 'selected' : ''?

— মালভোলিও

মালভোলিও আফার, টেরিনারি অপারেটর v0.9.x তে কৌণিক প্রকাশের মধ্যে কাজ করছে না। এটি কম-বেশি একটি সুইচ।

— orcun

এনজি-ক্লাস (1/19/2012 হিসাবে) এখন এমন একটি এক্সপ্রেশনকে সমর্থন করে যা অবশ্যই 1-এর মধ্যে মূল্যায়ন করতে হবে) স্থান-সীমিত শ্রেণীর নামগুলির একটি স্ট্রিং, বা 2) এবং শ্রেণীর নামের অ্যারে বা 3) শ্রেণীর মানচিত্র / অবজেক্ট বুলিয়ান মানগুলির নাম। সুতরাং, 3 ব্যবহার করে): এনজি-শ্রেণি = "{নির্বাচিত: $ সূচক == নির্বাচিত সূচক}"

— মার্ক রাজকক

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

— অরকুন

আমি কেবল যুক্ত করতে চাই, আমার একটা সমস্যা হচ্ছে কারণ আমি সিনট্যাক্সের মতো ব্যবহার করছিলাম {classname: '$index === selectedIndex'} এবং এটি কাজ করছে না। আমি যখন সবকিছু একসাথে ঠেলে দিয়েছিলাম এবং == এর পরিবর্তে == ব্যবহার করতাম তখন এটি কাজ করে। {classname: '$index==selectedIndex'}

— লুকাস

Answer 2

এনজি-ক্লাস এমন একটি অভিব্যক্তি সমর্থন করে যা অবশ্যই মূল্যায়ন করতে হবে

1. স্থান-সীমিত শ্রেণীর নামের একটি স্ট্রিং, বা
2. শ্রেণীর নামের একটি অ্যারে, বা
3. বুলিয়ান মানগুলির শ্রেণীর নামের একটি মানচিত্র / অবজেক্ট।

সুতরাং, ফর্ম 3 ব্যবহার করে) আমরা সহজভাবে লিখতে পারি

ng-class="{'selected': $index==selectedIndex}"

আরও দেখুন কীভাবে আমি AngularJS এ শর্তাধীন CSS স্টাইল প্রয়োগ করব? একটি বিস্তৃত উত্তরের জন্য।

---

আপডেট : কৌণিক 1.1.5 একটি টার্নারি অপারেটরের জন্য সমর্থন যোগ করেছে , সুতরাং যদি সেই নির্মাণটি আপনার আরও পরিচিত হয়:

ng-class="($index==selectedIndex) ? 'selected' : ''"

Comments

টেরিনারি অপারেটরগুলির জন্য +1 (এবং এখনই আমার একটি দরকার) তবে 1.1 * * এটি একটি 'অস্থির মুক্তি' যেখানে টাইপ করার সময় অনুযায়ী - এপিআই বিজ্ঞপ্তি ছাড়াই পরিবর্তিত হতে পারে। 1.0। * স্থিতিশীল, তাই আগামী সপ্তাহে 6 মাস ধরে একটি প্রকল্প চালু হওয়ার জন্য আমি তার সাথে যেতে আরও স্বাচ্ছন্দ্যবোধ করি।

— ডেভ এভারিট

ng-class="{'selected': $index==selectedIndex}"আমার জন্য কাজ করে

— knuhol

Answer 3

আমার প্রিয় পদ্ধতিটি টের্নারি এক্সপ্রেশন ব্যবহার করছে।

ng-class="condition ? 'trueClass' : 'falseClass'"

দ্রষ্টব্য: আপনি কৌনিকটির পুরানো সংস্করণ ব্যবহার করছেন তবে এর পরিবর্তে আপনার এটি ব্যবহার করা উচিত,

ng-class="condition && 'trueClass' || 'falseClass'"

Comments

এই আমাকে সাহায্য এই মত প্রকাশের লিখছি: ng-class="property.name=='timestamp' ? 'property-timestamp' : 'property-'+{{$index}}"। অন্য কোনও উপায় বের করতে পারেনি।

— dduft

আমার স্কোপড বুলিয়ান মোডালফ্লাগ কেন আপডেট হচ্ছে না তা আমি সত্যিই খুঁজে পাচ্ছি না - এনজি-ক্লাস = "closed 'ক্লোজড': মডেলফ্ল্যাগ, 'ওপেন':! মোডালফ্লাগ}" আমি স্কোপড ভেরিয়েবল / বুলিয়ানের উপর নির্ভর করে বদ্ধ বা খোলা যোগ করার চেষ্টা করছি - যদি কেউ সহায়তা করতে পারে আমি খুব কৃতজ্ঞ হব - ধন্যবাদ।

— অবতরণ করেছে

এটি 1.5 সংস্করণ হিসাবে চালু করা হয়েছিল। github.com/angular/angular.js/commit/…

— মুবাশির

Answer 4

আমি এতে যুক্ত করব, কারণ এর মধ্যে কয়েকটি উত্তর পুরানো বলে মনে হচ্ছে। আমি এটি কীভাবে করব তা এখানে:

<class="ng-class:isSelected">

যেখানে 'isSelected' স্কোপড কৌণিক নিয়ামকের মধ্যে সংজ্ঞায়িত একটি জাভাস্ক্রিপ্ট পরিবর্তনশীল।


আপনার প্রশ্নকে আরও সুনির্দিষ্টভাবে সমাধান করার জন্য, এখানে আপনি কীভাবে একটি তালিকা তৈরি করতে পারেন তা এখানে:

এইচটিএমএল

<div ng-controller="ListCtrl">  
    <li class="ng-class:item.isSelected" ng-repeat="item in list">   
       {{item.name}}
    </li>  
</div>

জাতীয়

function ListCtrl($scope) {    
    $scope.list = [  
        {"name": "Item 1", "isSelected": "active"},  
        {"name": "Item 2", "isSelected": ""}
    ]
}

দেখুন: http://jsfiddle.net/tTffMM /

দেখুন: http://docs.angularjs.org/api/ng.directive:ng ক্লাস

Comments

শ্রেণি = "এনজি-শ্রেণি: আইটেম.আইএসলেক্টেড" এবং এনজি-ক্লাস = "আইটেম.আইসলেক্টেড"

— zloctb

ng-class:classNameশুধু ব্যবহার করে বনাম ব্যবহার সম্পর্কে কৌতূহল class="{{className}}"?

— রই

Answer 5

এখানে একটি আরও সহজ সমাধান:

function MyControl($scope){
    $scope.values = ["a","b","c","d","e","f"];
    $scope.selectedIndex = -1;
    
    $scope.toggleSelect = function(ind){
        if( ind === $scope.selectedIndex ){
            $scope.selectedIndex = -1;
        } else{
            $scope.selectedIndex = ind;
        }
    }
    
    $scope.getClass = function(ind){
        if( ind === $scope.selectedIndex ){
            return "selected";
        } else{
            return "";
        }
    }
       
    $scope.getButtonLabel = function(ind){
        if( ind === $scope.selectedIndex ){
            return "Deselect";
        } else{
            return "Select";
        }
    }
}

.selected {
    color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<div ng-app ng-controller="MyControl">
    <ul>
        <li ng-class="getClass($index)" ng-repeat="value in values" >{{value}} <button ng-click="toggleSelect($index)">{{getButtonLabel($index)}}</button></li>
    </ul>
    <p>Selected: {{selectedIndex}}</p>
</div>

Comments

আমি আপনার কন্ট্রোলারকে সিএসএস স্টাফ থেকে পরিষ্কার রাখার জন্য সুপারিশ করব। এটি এমন একটি পথ যা আপনি নীচে নামতে চান না।

— লিবিয়াথন

শ্রেণীর নামগুলি টেম্পলেটটির সাথে সম্পর্কিত

— কেসির

এক পর্যায়ে, জাস্টফিল তাদের বিল পরিশোধ করতে মিস করতে পারে, বা অন্য কোনও ডোমেনে চলে যেতে বেছে নিতে পারে বা দায়বদ্ধ ব্যক্তিরা একটি বাসের মাধ্যমে মারা যায় (বাস ফ্যাক্টরটিও দেখুন)। তাই আমি ব্যাখ্যা করার কি যে বেহালার, না বলতে পারি মধ্যে আপনার উত্তর? এটি স্ট্যাক ওভারফ্লোতেও প্রচলিত।

— সেবাস্তিয়ান মাচ

Answer 6

আমি সম্প্রতি একটি অনুরূপ সমস্যার মুখোমুখি হয়েছি এবং কেবল শর্তসাপেক্ষ ফিল্টার তৈরির সিদ্ধান্ত নিয়েছি:

  angular.module('myFilters', []).
    /**
     * "if" filter
     * Simple filter useful for conditionally applying CSS classes and decouple
     * view from controller 
     */
    filter('if', function() {
      return function(input, value) {
        if (typeof(input) === 'string') {
          input = [input, ''];
        }
        return value? input[0] : input[1];
      };
    });

এটি একটি একক আর্গুমেন্ট গ্রহণ করে, যা হয় 2-উপাদান অ্যারে বা একটি স্ট্রিং, যা অ্যারেতে পরিণত হয় যা খালি স্ট্রিংটিকে দ্বিতীয় উপাদান হিসাবে যুক্ত করে:

<li ng-repeat="item in products | filter:search | orderBy:orderProp |
  page:pageNum:pageLength" ng-class="'opened'|if:isOpen(item)">
  ...
</li>

Comments

আমার কাছে আমি একটি বুলিয়ান মান 1 ও 0 অনুসারে একটি হ্যাঁ নয় () ফিল্টার রিটার্নিং ক্লাস 'হ্যাঁ' বা 'না' filter('yesNo', function() { return function(input) { // info('yesNo('+ input +')'); switch(input){ case '1': return ' yes '; break; default: return ' no '; break; } } });

— উদাহরণের জন্য তৈরি করেছি

এনজি-ক্লাস বুলিয়ান মানগুলির জন্য শ্রেণীর নামের একটি মানচিত্র / অবজেক্ট পরিচালনা করতে পারে, সুতরাং আপনি কেবল নিম্নলিখিতটি লিখতে পারেন: এনজি-শ্রেণি = "{হ্যাঁ: কিছু_বুলিয়ান_প্রকাশ, না: কিছু_ অন্য_বুলিয়ান_প্রকাশ Eg" উদাহরণস্বরূপ, এনজি-শ্রেণি = "{হ্যাঁ: ইনপুট , না

— :!

Answer 7

আপনি যদি বাইনারি মূল্যায়নের বাইরে যেতে চান এবং আপনার সিএসএসকে আপনার নিয়ামকের বাইরে রাখতে চান তবে আপনি একটি সাধারণ ফিল্টার প্রয়োগ করতে পারেন যা মানচিত্রের অবজেক্টের বিরুদ্ধে ইনপুটটিকে মূল্যায়ন করে:

angular.module('myApp.filters, [])
  .filter('switch', function () { 
      return function (input, map) {
          return map[input] || '';
      }; 
  });

এটি আপনাকে আপনার মার্কআপটি এভাবে লিখতে দেয়:

<div ng-class="muppets.star|switch:{'Kermit':'green', 'Miss Piggy': 'pink', 'Animal': 'loud'}">
    ...
</div>

Comments

হাই @ জো, কোনও নাল মানগুলি কীভাবে পরিচালনা করবেন? যদি আমি

— ইনপুটটিতে শূন্যপথে

@ ব্যবহারকারী 1191559 - আপনি মানচিত্রে একটি 'ডিফল্ট' আইটেম রাখতে পারেন, তবে যদি 'ইনপুট' নਾਲ হয় তবে সেই মানটি ফিরিয়ে দিন।

— জো স্টিলে

Answer 8

আমি সম্প্রতি যা করছিলাম তা এই করছিল:

<input type="password"  placeholder="Enter your password"
ng-class="{true: 'form-control isActive', false: 'isNotActive'}[isShowing]">

isShowingমান আমার নিয়ামক যে একটি বাটন এবং একক প্রথম বন্ধনী মধ্যে অংশ ক্লিকেই টগল পরার আমার CSS ফাইলে শ্রেণীর আমি তৈরি অবস্থিত হয় মান।

সম্পাদনা: আমি এটিও যুক্ত করতে চাই যে কোডসুক.কমের একটি বিনামূল্যে কোর্স রয়েছে যা গুগল দ্বারা অ্যাঙ্গুলারজেএস-এ স্পনসর করা হয়েছে যা এই সমস্ত স্টাফ এবং তারপরে কিছু যায়। কোনও কিছুর জন্য অর্থ প্রদানের দরকার নেই, কেবলমাত্র একটি অ্যাকাউন্টের জন্য সাইনআপ করুন এবং চালিয়ে যান! সবাইর জন্য শুভকামনা!

Comments

আপনি এখানে একটি বেহাল বা আরও কোড সরবরাহ করতে পারেন? isShowingকন্ট্রোলারে তখন কি অ্যারে থাকে?

— কাইল পেনেল

আমার ধারণা একটি বুলিয়ান

— মিরকো

Answer 9

টার্নারি অপারেটরটি সবেমাত্র 1.1.5 তে কৌনিক পার্সারে যুক্ত করা হয়েছে ।

সুতরাং এটি করার সহজ উপায় এখন:

ng:class="($index==selectedIndex)? 'selected' : ''"

Comments

এছাড়াও: class="otherClass ng-class:($index==selectedIndex)? 'selected' : '';"।

— পিটার

Answer 10

শর্ত দিয়ে রিটার্ন ক্লাস পরিচালনা করতে আমরা একটি ফাংশন করতে পারি

<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) {
                    switch(strValue) {
                        case "It is Red":return "Red";break;
                        case "It is Yellow":return "Yellow";break;
                        case "It is Blue":return "Blue";break;
                        case "It is Green":return "Green";break;
                        case "It is Gray":return "Gray";break;
                    }
                }
        }]);
</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 11

আমি কৌনিকটিতে নতুন কিন্তু আমার সমস্যাটি সমাধান করার জন্য এটি পেয়েছি:

<i class="icon-download" ng-click="showDetails = ! showDetails" ng-class="{'icon-upload': showDetails}"></i>

এটি শর্তাধীনভাবে একটি ভেরের উপর ভিত্তি করে একটি ক্লাস প্রয়োগ করবে। এটা একটা সঙ্গে শুরু হয় বন্ধ আইকন-ডাউনলোড ডিফল্ট, ng ক্লাসের ব্যবহার, আমি স্থিতি পরীক্ষা showDetailsযদি true/falseএবং ক্লাস প্রয়োগ আইকন আপলোড । এটা দুর্দান্ত কাজ।

আশা করি এটা সাহায্য করবে.

Answer 12

এটি একটি কবজির মতো কাজ করে;)

<ul class="nav nav-pills" ng-init="selectedType = 'return'">
    <li role="presentation" ng-class="{'active':selectedType === 'return'}"
        ng-click="selectedType = 'return'"><a href="#return">return

    </a></li>
    <li role="presentation" ng-class="{'active':selectedType === 'oneway'}"
        ng-click="selectedType = 'oneway'"><a href="#oneway">oneway
    </a></li>
</ul>

Answer 13

এটি সম্ভবত বিস্মৃত হওয়ার দিকে অবনমিত হবে, তবে এখানে আমি টেবিলের সারিটি প্রথম, মধ্যম বা শেষের কিনা তার উপর নির্ভর করে ক্লাসে স্যুইচ করতে 1.1.5 এর টেরিনারি অপারেটরগুলি ব্যবহার করেছি - যদি সারণীতে কেবল একটি সারি থাকে তা ব্যতীত:

<span class="attribute-row" ng-class="(restaurant.Attributes.length === 1) || ($first ? 'attribute-first-row': false || $middle ? 'attribute-middle-row': false || $last ? 'attribute-last-row': false)">
</span>

Answer 14

এটি আমার কাজ একাধিক শর্তাধীন বিচারক:

<li ng-repeat='eOption in exam.examOptions' ng-class="exam.examTitle.ANSWER_COM==exam.examTitle.RIGHT_ANSWER?(eOption.eoSequence==exam.examTitle.ANSWER_COM?'right':''):eOption.eoSequence==exam.examTitle.ANSWER_COM?'wrong':eOption.eoSequence==exam.examTitle.RIGHT_ANSWER?'right':''">
  <strong>{{eOption.eoSequence}}</strong> &nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;
  <span ng-bind-html="eOption.eoName | to_trusted">2020 元</span>
</li>

Answer 15

এখানে এনজি-ক্লাস ব্যবহার করা যাবে না এমন ক্ষেত্রে আরও ভাল বিকল্প রয়েছে (উদাহরণস্বরূপ এসভিজি স্টাইল করার সময়):

ng-attr-class="{{someBoolean && 'class-when-true' || 'class-when-false' }}"

(আমি মনে করি এনজি-অ্যাটর- ব্যবহার করার জন্য আপনাকে সর্বশেষতম অস্থির কৌণিক অবস্থানে থাকতে হবে, আমি বর্তমানে 1.1.4 এ আছি)

Answer 16

ভাল আমি আপনাকে পরামর্শ দিচ্ছি যে আপনার ফাংশনটি সত্য বা মিথ্যা দিয়ে আপনার নিয়ামকের শর্ত পরীক্ষা করতে ।

<div class="week-wrap" ng-class="{today: getTodayForHighLight(todayDate, day.date)}">{{day.date}}</div>

এবং আপনার নিয়ামকের মধ্যে শর্তটি পরীক্ষা করুন

$scope.getTodayForHighLight = function(today, date){
return (today == date);
}

Answer 17

আংশিক

  <div class="col-md-4 text-right">
      <a ng-class="campaign_range === 'thismonth' ? 'btn btn-blue' :  'btn btn-link'" href="#" ng-click='change_range("thismonth")'>This Month</a>
      <a ng-class="campaign_range === 'all' ? 'btn btn-blue' :  'btn btn-link'" href="#" ng-click='change_range("all")'>All Time</a>
  </div>

নিয়ামক

  $scope.campaign_range = "all";
  $scope.change_range = function(range) { 
        if (range === "all")
        {
            $scope.campaign_range = "all"
        }
        else
        {  
            $scope.campaign_range = "thismonth"
        }
  };

Answer 18

আপনি যদি কৌণিক প্রাক v1.1.5 ব্যবহার করছেন (অর্থাত্ কোনও টেরিনারি অপারেটর নেই) এবং আপনি এখনও উভয় অবস্থাতেই একটি মান নির্ধারণের জন্য সমপরিমাণ উপায় চান আপনি এই জাতীয় কিছু করতে পারেন:

ng-class="{'class1':item.isReadOnly == false, 'class2':item.isReadOnly == true}"

Answer 19

আপনার যদি একটি সাধারণ শ্রেণি থাকে যা অনেক উপাদানকে প্রয়োগ করা হয় আপনি একটি কাস্টম নির্দেশিকা তৈরি করতে পারেন যা সেই শ্রেণিটি এনজি-শো / এনজি-লুকের মতো যুক্ত করবে।

এই নির্দেশিকাটি ক্লিক করা থাকলে বাটনটিতে 'সক্রিয়' শ্রেণি যুক্ত করবে

module.directive('ngActive',  ['$animate', function($animate) {
  return function(scope, element, attr) {
    scope.$watch(attr.ngActive, function ngActiveWatchAction(value){
      $animate[value ? 'addClass' : 'removeClass'](element, 'active');
    });
  };
}]);

অধিক তথ্য

Answer 20

অনেক অনুসন্ধানের পরে আজ কেবল আমার জন্য কাজ করা কিছু যুক্ত করা ...

<div class="form-group" ng-class="{true: 'has-error'}[ctrl.submitted && myForm.myField.$error.required]">

আশা করি এটি আপনার সফল উন্নয়নে সহায়তা করবে।

=)

Undocumented এক্সপ্রেশন সিনট্যাক্স: দুর্দান্ত ওয়েবসাইট লিঙ্ক ... =)

Comments

গৃহীত উত্তরটি দেখুন। এটি একই জিনিস করছে এবং আরও উদাহরণ দেয়।

— শ্রদ্ধা কোড 15

Answer 21

পরীক্ষা করে দেখুন এই ।

কুখ্যাত AngularJS if|elseবিবৃতি !!!
আমি যখন Angularjs ব্যবহার শুরু করি তখন আমি কিছুটা অবাক হয়েছিলাম যে আমি / অন্য বিবৃতিটি খুঁজে পেলাম না।

সুতরাং আমি একটি প্রকল্পে কাজ করছিলাম এবং আমি লক্ষ্য করেছি যে if / অন্য বিবৃতিটি ব্যবহার করার সময়, লোড করার সময় শর্তটি দেখায়। এটি ঠিক করতে আপনি এনজি-ক্লোকার ব্যবহার করতে পারেন।

<div class="ng-cloak">
 <p ng-show="statement">Show this line</span>
 <p ng-hide="statement">Show this line instead</span>
</div>

.ng-cloak { display: none }

ধন্যবাদ আমাদৌ

Answer 22

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

// Support for string arguments
getClassNames('class1', 'class2');

// support for Object
getClassNames({class1: true, class2 : false});

// support for all type of data
getClassNames('class1', 'class2', ['class3', 'class4'], { 
    class5 : function() { return false; },
    class6 : function() { return true; }
});

<div className={getClassNames({class1: true, class2 : false})} />