[Html] AngularJS ngClass conditional


Answers

استخدام ng-class داخل ng-repeat

<table>
    <tbody>
            <tr ng-repeat="task in todos"
                ng-class="{'warning': task.status == 'Hold' , 'success': task.status == 'Completed',
              'active': task.status == 'Started', 'danger': task.status == 'Pending' } ">
                <td>{{$index + 1}}</td>
                <td>{{task.name}}</td>
                <td>{{task.date|date:'yyyy-MM-dd'}}</td>
                <td>{{task.status}}</td>
            </tr>
    </tbody>
</table>

لكل حالة في task.status يتم استخدام فئة مختلفة للصف.

Question

هل هناك طريقة لعمل تعبير لشيء مثل ngClass ليكون شرطيًا. على سبيل المثال ، لقد جربت ما يلي:

<span ng-class="{test: 'obj.value1 == \'someothervalue\''}">test</span>

تتمثل المشكلة في هذا الرمز في أنه بغض النظر عن obj.value1 ، يتم تطبيق اختبار الفئة دائمًا على العنصر. فعل هذا:

<span ng-class="{test: obj.value2}">test</span>

طالما أن obj.value2 لا يساوي قيمة صائبة ، فلا يتم تطبيق الفئة. الآن يمكنني حل المشكلة في المثال الأول عن طريق القيام بذلك:

<span ng-class="{test: checkValue1()}">test</span>

حيث تبدو وظيفة checkValue1 بالشكل التالي:

$scope.checkValue1 = function() {
  return $scope.obj.value === 'somevalue';
}

أنا فقط أتساءل ما إذا كان هذا هو ngClass من المفترض أن يعمل. أنا أيضا بناء التوجيه المخصص حيث أود أن أفعل شيء مماثل لهذا. ومع ذلك لا يمكنني العثور على طريقة لمشاهدة تعبير (وربما هذا مستحيل وسبب تشغيله على هذا النحو).

هنا هو plnkr لإظهار ما أعنيه:

http://plnkr.co/edit/iSh0t8swDEyGbh7ylZg2?p=preview




أرى أمثلة رائعة أعلاه ولكنها تبدأ جميعها بأقواس معقوفة (خريطة json). خيار آخر هو إرجاع نتيجة تعتمد على الحساب. يمكن أن تكون النتيجة أيضًا قائمة بأسماء فئات css (وليس مجرد خريطة). مثال:

ng-class="(status=='active') ? 'enabled' : 'disabled'"

أو

ng-class="(status=='active') ? ['enabled'] : ['disabled', 'alik']"

Explanation: اذا كانت الحالة نشطة ، سيتم استخدام الفئة enabled . خلاف ذلك ، سيتم استخدام الفصل disabled .

يتم استخدام القائمة [] لاستخدام فئات متعددة (وليس واحدة فقط).




للزاوية 2 ، استخدم هذا

<div [ngClass]="{'active': dashboardComponent.selected_menu == 'mapview'}">Content</div>



بناء الجملة الزاوي هو استخدام : المشغل لأداء ما يعادل معدلا إذا كان

<div  ng-class="{ 'clearfix' : row%2==0 }">

إضافة فئة clearfix إلى صفوف حتى. ومع ذلك ، يمكن أن يكون التعبير أي شيء يمكن أن يكون لدينا في حالة طبيعية ، ويجب أن يتم تقييمه إما صحياً أو كاذباً.




يعد استخدام الدالة مع ng-class خيارًا جيدًا عند قيام شخص ما بتشغيل منطق معقد لتقرير فئة CSS المناسبة.

http://jsfiddle.net/ms403Ly8/2/

HTML:

<div ng-app>
  <div ng-controller="testCtrl">
        <div ng-class="getCSSClass()">Testing ng-class using function</div>       
    </div>
</div>

CSS:

.testclass { Background: lightBlue}

جافا سكريبت :

function testCtrl($scope) {
    $scope.getCSSClass = function() {
     return "testclass ";
  }     
}