شرح طرق مختلفة لتنفيذ تعليمات ng-class في AngularJS

مقدمة

في تطوير البرمجيات، يمكننا مواجهة هذا النوع من الحاجات بانتظام، حيث يجب على عنصر أن يظهر في مختلف الحالات بطرق مختلفة، وبالطبع، هذه الطريقة تكون بتعديل خصائص css، لتحقيق تغيير ديناميكي للقيم، نحتاج إلى تغيير قيمة class الخاصة به.

سأقدم لكم هنا ثلاث طرق لتحقيق ذلك، يمكنكم اختيار الطريقة التي تناسب احتياجاتكم، دعونا نرى.

الطريقة الأولى: من خلال الترابط المزدوج للبيانات (غير مفضل)

<div ng-controller="firstController">
  <div ng-class="{{className}}"></div>
</div>
<script>
  var app=angular.module("myModule",[]);
   app.controller('firstController',function($scope){
     $scope.className='change';
   });
</script>

على الإنترنت هناك العديد من التوصيات التي لا تقترحها، ولكن بصراحة، إذا كان الترابط المزدوج البيانات في angularJS بهذا القدر من الجاذبية، لماذا لا يمكن تغييره بهذه الطريقة؟ بعد البحث عن الأسباب: "في controller تم تضمين classname، في نظري دائمًا ما يكون غريب، أتمنى أن يكون controller مجرد object منjavascript النقية"، بالطبع لم يتم تحديد ذلك بشكل واضح كأنه غير مسموح به، على العكس من ذلك، أعتقد أن هذا يبدو مفيدًا جدًا، يسمح لكل عنصر في html أن يتحرك كيفما يشاء! بالمثل، لا يمكن تغيير src في عنصر img بطريقة أخرى، ولكن يمكن القيام بذلك بهذه الطريقة! بالطبع، هذا الطريقة يبدو غريبًا قليلاً، أعتقد أن يمكن اللجوء إليها كحل بديل~

الطريقة الثانية: من خلال مجموعة من الأوبجكتات

<div ng-controller="firstController">
 <div ng-class="{true:'change1',false:'change2'}[className]"></div>
</div>
<script>
  var app=angular.module("myModule",[]);
   app.controller('firstController',function($scope){
     $scope.className=true;
   });
</script>

التحقيق بسيط، فقط عندما تكون className صحيحة تكون class change1، وإذا كانت خطأ تكون change2.

لكن هناك نقطة سيئة وهي أن لا يمكن لمكون واحد أن يكون في وضعين فقط، رغم أن هذا القول! يكفي بشكل أساسي لتحقيق الهدف، أستخدم هذا عادةً. بسيط، واضح!

الطريقة الثالثة: من خلال key/value

<div ng-controller="firstController">
  <div ng-class="{'change1':select,'change2':choice,'change3':lala}">
</div>
<script>
  var app=angular.module("myModule",[]);
   app.controller('firstController',function($scope){
     $scope.select=true;
     $scope.lala=true;
   });
</script>

عندما يكون lala صحيحًا، تكون class change3، وأعتقد أن هذا هو الموصى به، يمكن أن يعالج بعض النقاط التي يفتقر إليها الطريقة الثانية ~

الخاتمة

إذا كنا قادرين على استخدام هذه التعليمات بسهولة في مشاريعنا، فإن هذا سيجلب لنا الكثير من الراحة، وسنكون قادرين على الحصول على المزيد من الأفكار لحل المشاكل، وسنتمكن من استخدام هذه التعليمات بشكل مدمج لحل بعض المشاكل المعقدة بسرعة. هذا هو محتوى المقالة كله، آمل أن يكون هذا المقال مفيدًا للذين يرغبون في التعلم أو العمل، ويمكن للجميع ترك تعليقات للاستفسار.