AngularJS ngClass υπό όρους

Υπάρχει κάποιος τρόπος να κάνετε μια έκφραση για κάτι όπως ng-class να είναι μια συνθήκη;

Για παράδειγμα, δοκίμασα το εξής: "Για παράδειγμα, δοκίμασα το εξής:

<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';
}

Απλά αναρωτιέμαι αν έτσι πρέπει να λειτουργεί η ng-class. Κατασκευάζω επίσης μια προσαρμοσμένη οδηγία όπου θα ήθελα να κάνω κάτι παρόμοιο με αυτό. Ωστόσο, δεν μπορώ'δεν μπορώ να βρω έναν τρόπο να παρακολουθήσω μια έκφραση (και ίσως αυτό είναι αδύνατο και ο λόγος για τον οποίο λειτουργεί έτσι).

Εδώ είναι ένα plnkr για να δείξω τι εννοώ.

daaawx
Επεξεργασμένη ερώτηση Κάνε Μάρτιος 2019 в 7:18
Προγραμματισμός
html css angularjs
Κάνε Μάιος 2013 в 7:38
19 προβολές
Λύση

Η πρώτη σας προσπάθεια ήταν σχεδόν σωστή, Θα πρέπει να δουλέψει χωρίς τα εισαγωγικά.

{test: obj.value1 == 'someothervalue'}

Εδώ είναι ένα plnkr.

Η οδηγία ngClass θα λειτουργήσει με οποιαδήποτε έκφραση που αξιολογείται αληθώς ή ψευδώς, λίγο παρόμοια με τις εκφράσεις της Javascript αλλά με κάποιες διαφορές, μπορείτε να διαβάσετε σχετικά εδώ. Αν η συνθήκη σας είναι πολύ περίπλοκη, τότε μπορείτε να χρησιμοποιήσετε μια συνάρτηση που επιστρέφει truthy ή falsey, όπως κάνατε στην τρίτη σας προσπάθεια.

Απλά για να συμπληρώσω: Μπορείτε επίσης να χρησιμοποιήσετε λογικούς τελεστές για να σχηματίσετε λογικές εκφράσεις όπως

ng-class="{'test': obj.value1 == 'someothervalue' || obj.value2 == 'somethingelse'}"
Bertrand
Επεξεργασμένη απάντηση Κάνε Ιούλιος 2015 в 1:17
Σχόλια (5)

Χρήση 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 χρησιμοποιείται μια διαφορετική κλάση για τη γραμμή.

JakeGould
Επεξεργασμένη απάντηση Κάνε Απρίλιος 2016 в 2:52
Σχόλια (2)

Η σύνταξη της Angular χρησιμοποιεί τον τελεστή : για να εκτελέσει το ισοδύναμο ενός τροποποιητή if.

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

Προσθέστε την κλάση clearfix σε ζυγές γραμμές. Παρ' όλα αυτά, η έκφραση θα μπορούσε να είναι οτιδήποτε μπορούμε να έχουμε σε κανονική συνθήκη if και θα πρέπει να αξιολογείται είτε σε true είτε σε false.

Tristan
Επεξεργασμένη απάντηση Κάνε Αύγουστος 2018 в 9:03
Σχόλια (1)