টেবিলের উপাদানগুলির মধ্যে ক্লাস প্রয়োগ করার সময় আমি সমস্যার মুখোমুখি হয়েছি যখন আমার একটি ক্লাস ইতিমধ্যে পুরো টেবিলটিতে প্রয়োগ হয়েছিল (উদাহরণস্বরূপ, বিজোড় সারিগুলিতে একটি রঙ প্রয়োগ করা হয়েছে <myClass tbody tr:nth-child(even) td>)। দেখে মনে হচ্ছে আপনি যখন বিকাশকারী সরঞ্জামগুলির সাহায্যে উপাদানটি পরীক্ষা করেন , তখন element.styleকোনও স্টাইল বরাদ্দ করা হয় না। সুতরাং ব্যবহারের পরিবর্তে ng-class, আমি ব্যবহার করার চেষ্টা করেছি ng-styleএবং এই ক্ষেত্রে, নতুন সিএসএস অ্যাট্রিবিউটটি ভিতরে উপস্থিত হবে element.style। এই কোডটি আমার পক্ষে দুর্দান্ত কাজ করে:
<tr ng-repeat="element in collection">
[...amazing code...]
<td ng-style="myvar === 0 && {'background-color': 'red'} ||
myvar === 1 && {'background-color': 'green'} ||
myvar === 2 && {'background-color': 'yellow'}">{{ myvar }}</td>
[...more amazing code...]
</tr>
মাইভার যা আমি মূল্যায়ন করছি এবং প্রতিটি ক্ষেত্রে আমি মাইভার মানের <td>উপর নির্ভর করে প্রত্যেকের কাছে একটি স্টাইল প্রয়োগ করি , যা পুরো টেবিলের জন্য সিএসএস শ্রেণিতে প্রয়োগ করা বর্তমান শৈলীর ওভাররাইট করে।
হালনাগাদ
আপনি যদি টেবিলটিতে উদাহরণস্বরূপ কোনও শ্রেণি প্রয়োগ করতে চান তবে কোনও পৃষ্ঠা দেখার সময় বা অন্য ক্ষেত্রে আপনি এই কাঠামোটি ব্যবহার করতে পারেন:
<li ng-class="{ active: isActive('/route_a') || isActive('/route_b')}">
মূলত, আমাদের এনজি-ক্লাসটি সক্রিয় করার জন্য যা প্রয়োগ করা হবে তা হল ক্লাস এবং সত্য বা মিথ্যা বিবৃতি। সত্য শ্রেণী প্রয়োগ করে এবং মিথ্যা দেয় না। সুতরাং এখানে আমাদের পৃষ্ঠাটির রুটের দুটি চেক এবং তাদের মধ্যে একটি ওআর রয়েছে, সুতরাং আমরা যদি /route_a OR এ থাকি route_bতবে সক্রিয় শ্রেণি প্রয়োগ করা হবে।
এটি ডানদিকে কেবল একটি যুক্তিযুক্ত ফাংশন নিয়ে কাজ করে যা সত্য বা মিথ্যা প্রত্যাবর্তন করে।
সুতরাং প্রথম উদাহরণে, এনজি-স্টাইলটি তিনটি বিবৃতি দ্বারা শর্তযুক্ত। যদি সেগুলি সমস্ত মিথ্যা হয় তবে কোনও শৈলী প্রয়োগ করা হয়নি, তবে আমাদের যুক্তি অনুসরণ করে কমপক্ষে একটি প্রয়োগ করা হচ্ছে, সুতরাং, যুক্তি প্রকাশটি পরীক্ষা করবে যে কোন পরিবর্তনশীল তুলনা সত্য এবং কারণ একটি খালি অ্যারে সর্বদা সত্য, এটি হবে রিটার্ন হিসাবে একটি অ্যারে রেখেছিল এবং কেবলমাত্র একটি সত্য দিয়ে, আমরা পুরো প্রতিক্রিয়ার জন্য OR ব্যবহার করছি তা বিবেচনা করে , বাকি শৈলীটি প্রয়োগ করা হবে।
যাইহোক, আমি আপনাকে ফাংশনটি দিতে ভুলে গেছি হ'ল এ্যাকটিভ ():
$rootScope.isActive = function(viewLocation) {
return viewLocation === $location.path();
};
নতুন আপডেট
এখানে আপনার কাছে এমন কিছু রয়েছে যা আমি সত্যিই দরকারী বলে মনে করি। যখন আপনার কোনও ভেরিয়েবলের মানের উপর নির্ভর করে কোনও ক্লাস প্রয়োগ করার প্রয়োজন হয়, উদাহরণস্বরূপ, এর বিষয়বস্তুর উপর নির্ভর করে একটি আইকন div, আপনি নিম্নলিখিত কোডটি ব্যবহার করতে পারেন (এতে খুব দরকারী ng-repeat):
<i class="fa" ng-class="{ 'fa-github' : type === 0,
'fa-linkedin' : type === 1,
'fa-skype' : type === 2,
'fa-google' : type === 3 }"></i>
হরফ থেকে ফন্ট আইকন