এনজুলারজেএস টগল ক্লাস এনজি-ক্লাস ব্যবহার করে

Question

আমি ব্যবহার করে কোনও উপাদানটির ক্লাস টগল করার চেষ্টা করছি am ng-class

<button class="btn">
  <i ng-class="{(isAutoScroll()) ? 'icon-autoscroll' : 'icon-autoscroll-disabled'}"></i>
</button>

isAutoScroll ():

$scope.isAutoScroll = function()
{
    $scope.autoScroll = ($scope.autoScroll) ? false : true;
    return $scope.autoScroll;
}

মূলত, যদি $scope.autoScroll সত্য হয় আমি এনজি-ক্লাস হওয়া চাই icon-autoscrollএবং যদি এটি মিথ্যা হয় তবে আমি এটি হতে চাইicon-autoscroll-disabled

আমার এখন যা আছে তা কাজ করছে না এবং কনসোলে এই ত্রুটিটি উত্পাদন করছে

Error: Lexer Error: Unexpected next character at columns 18-18 [?] in expression [{(isAutoScroll()) ? 'icon-autoscroll' : 'icon-autoscroll-disabled'}].

আমি কীভাবে এটি সঠিকভাবে করব?

সম্পাদনা

সমাধান 1: (পুরানো)

<button class="btn" ng-click="autoScroll = !autoScroll">
  <i ng-class="{'icon-autoscroll': autoScroll, 'icon-autoscroll-disabled': !autoScroll}"></i>
</button>

সম্পাদনা 2

সমাধান 2:

আমি সমাধানটি আপডেট করতে চেয়েছিলাম Solution 3স্টিভির সরবরাহিত হিসাবে , ব্যবহার করা উচিত। টার্নারি অপারেটরের ক্ষেত্রে এটি সর্বাধিক মানক (এবং আমার কাছে পড়ার পক্ষে সহজ) is সমাধান হবে

<button class="btn" ng-click="autoScroll = !autoScroll">
  <i ng-class="autoScroll ? 'icon-autoscroll' : 'icon-autoscroll-disabled'"></i>
</button>

অনুবাদ:

if (autoScroll == true) ?// ব্যবহার শ্রেণি 'icon-autoscroll' :// অন্য ব্যবহার'icon-autoscroll-disabled'

Comments

angular expressionsপ্রতি ডক্সে শর্তসাপেক্ষে ব্যবহার করতে পারে না => কোনও নিয়ন্ত্রণ প্রবাহ বিবৃতি নেই: আপনি কৌণিক অভিব্যক্তিতে নিম্নলিখিতগুলির কোনওটি করতে পারবেন না: শর্তসাপেক্ষ, লুপ বা নিক্ষেপ। অন্য ফাংশন বা নির্দেশনাটি ব্যবহার করুন

— Charlietfl

@ রনি আমি আপনার সমাধানটি দেখেছি, এবং এটি দুর্দান্ত ছিল। তবে আমি ভাবছি কেন autoScrollএখানে প্রতিটি বাটনে কেবল প্রভাব পড়বে? (আমি এটি একাধিক বোতাম দিয়ে পরীক্ষা করেছি এবং এটিও খুব ভাল কাজ করে) আমার অর্থ, আমি যখন প্রতিটি বোতামটি ক্লিক করি তখন সমস্ত বোতামের পরিবর্তে ঠিক সেই বোতামটিই কার্যকর হয়।

— zx1986

Answer 1

এনজি-ক্লাসে শর্তযুক্ত কীভাবে ব্যবহার করবেন:

সমাধান 1:

<i ng-class="{'icon-autoscroll': autoScroll, 'icon-autoscroll-disabled': !autoScroll}"></i>

সমাধান 2:

<i ng-class="{true: 'icon-autoscroll', false: 'icon-autoscroll-disabled'}[autoScroll]"></i>

সমাধান 3 (কৌণিক v.1.1.4 + টের্নারি অপারেটরের জন্য সমর্থিত সমর্থন):

<i ng-class="autoScroll ? 'icon-autoscroll' : 'icon-autoscroll-disabled'"></i>

Plunker

Comments

দ্বিতীয় উদাহরণটি ক্লিনার, তবে এটি হাস্যকর যে আপনি যে পরিবর্তনশীলটি মূল্যায়ন করছেন তা প্রকাশের সামনে রাখতে পারবেন না ... এটি কেবল মজার বিষয় reads ভাববাণীটিকে যদি একটি বিবৃতি হিসাবে দেখছেন তা কল্পনা করুন: "যদি (পরিবর্তনশীল) সত্য: এটি করুন, মিথ্যা করুন: তা করুন ... উঃ

— #

@ স্টিও ফাাকাকিন দারুণ সাথী, কীভাবে এটি বাস্তব কোডের মতো দেখাচ্ছে এবং কিছু

— জঘন্য

আসলে মানটি প্রথমে মূল্যায়ন করা বেশ কার্যকর কারণ এটি দুর্ঘটনাক্রমে ভেরিয়েবলটিকে একটি নতুন মান নির্ধারণ করা এড়ায়।

— lharby

টার্নারি হ'ল আমি যা খুঁজছিলাম। সংস্করণ সমর্থন বিশদ সহ তিনটি উদাহরণ সরবরাহ করে ভাল কাজ।

— তাইকোয়ানজয়ে

Answer 2

বিকল্প সমাধান হিসাবে, জাভাস্ক্রিপ্ট লজিক অপারেটর '&&' এর উপর ভিত্তি করে যা শেষ মূল্যায়ন ফিরিয়ে দেয়, আপনি এটি এর মতো করেও করতে পারেন:

<i ng-class="autoScroll && 'icon-autoscroll' || !autoScroll && 'icon-autoscroll-disabled'"></i>

এটি কেবল সামান্য খাটো সিনট্যাক্স, তবে আমার পক্ষে পড়া সহজ easier

Answer 3

শর্তের ভিত্তিতে একাধিক শ্রেণি যুক্ত করুন:

<div ng-click="AbrirPopUp(s)" 
ng-class="{'class1 class2 class3':!isNew, 
           'class1 class4': isNew}">{{ isNew }}</div>

প্রয়োগ করুন: শ্রেণি 1 + শ্রেণি 2 + শ্রেণি 3 যখন নতুন = মিথ্যা ,

প্রয়োগ করুন: শ্রেণি 1 + শ্রেণি 4 যখন নতুন = সত্য

Answer 4

<div data-ng-init="featureClass=false" 
     data-ng-click="featureClass=!featureClass" 
     data-ng-class="{'active': featureClass}">
    Click me to toggle my class!
</div>

JQuery এর toggleClassপদ্ধতির সাথে সাদৃশ্যযুক্ত , activeউপাদানটি ক্লিক করা হলে ক্লাসটি চালু / বন্ধ করার উপায় ।

Comments

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

— অনটস

আমি নিশ্চিত নই কেন এই উত্তরে অনেক নেতিবাচক ভোট রয়েছে ?? এই সমাধানটি যা আসলে আমার জন্য উপরের অন্যান্যদের চেয়ে ভাল কাজ করেছিল ...

— পাওলো গ্রেইটনার

আমি মনে করি বিবরণটি খারাপভাবে লেখা হয়েছে এবং লোকেরা "jQuery" শব্দের প্রতিক্রিয়া দেখায় the বিটিডাব্লু, আপনার কি ভেরিয়েবলটি শুরু করা দরকার?

— অ্যাড্রিয়ান

Answer 5

কন্ট্রোলারে অটস্ক্রোল সংজ্ঞায়িত ও সংশোধিত হবে।

<span ng-class= "autoscroll?'class_if_true':'class_if_false'"></span>

শর্তের ভিত্তিতে একাধিক ক্লাস যুক্ত করুন:

<span ng-class= "autoscroll?'first second third':'classes_if_false'"></span>

Answer 6

আমি এই কাজটি এইভাবে করেছি:

<button class="btn" ng-click='toggleClass($event)'>button one</button>
<button class="btn" ng-click='toggleClass($event)' >button two</button>

// আপনার নিয়ামক মধ্যে

 $scope.toggleClass = function (event){
        $(event.target).toggleClass('active');
    }

Comments

এটি যখন কাজ করে, আপনি কৌনিক এবং jQuery মিশ্রিত করছেন। আপনার চেষ্টা করা উচিত এবং যদি আপনি পারেন তা এড়ানো উচিত। মূলত যা জিজ্ঞাসা করা হয়েছিল তা ক্লিক ইভেন্ট ছাড়া করা যেতে পারে। যদি আপনার উপরের বোতামে এই ক্লাসটি টগল করার কথা রয়েছে এমন অন্য একটি বাটন রয়েছে তবে কী করবেন? এটি এখন আপডেট হবে না কারণ আপনি এটিকে ক্লিক-এ পরিবর্তন করছেন এবং এনজি-ক্লাসের মাধ্যমে নয়

— রনি

এটি জেকলাইট থেকে এসেছে। আরও ডক্সের

— রুহুল আমিন

আমি বুঝেছি. আমার বক্তব্যটি মূল প্রশ্নের উত্তর অর্জন করতে আপনার jQuery কিছু ব্যবহার করার দরকার নেই।

— রনি