Misalkan saya memiliki 3 variabel (mereka dapat mengubah nilainya):

$scope.A = 'one';
$scope.B = true;
$scope.C = false;
  • <div ng-class="A"></div> merender <div class="one">
  • <div ng-class="{'two': B, 'three': C}"></div> merender <div class="two">

Bagaimana saya bisa menggabungkan variabel dan ekspresi untuk membuat <div class="one two">? Apakah saya harus menulis fungsi?

Saya mencoba: <div ng-class="[A, {'two': B}, {'three': C}]"></div>

0
cespon 29 Mei 2015, 18:08
2
Apakah Anda mencoba ini? :
 – 
Okazari
29 Mei 2015, 18:10
Bukankah itu akan menimpa atribut class? tidak yakin.
 – 
Praveen Puglia
29 Mei 2015, 18:11
Akan memberikan dua cara untuk melakukan ini
 – 
Okazari
29 Mei 2015, 18:11
Menambahkan plunker yang menunjukkan bahwa itu berfungsi;)
 – 
Okazari
29 Mei 2015, 18:25
Bahkan saya mencoba plunker dan upvoted :)
 – 
Praveen Puglia
29 Mei 2015, 18:26

1 menjawab

Jawaban Terbaik

Saya punya dua solusi dalam pikiran saya:

Lihat mereka bekerja di plunker ini

Pertama : dalam HTML

<div class="aclass {{A}}" ng-class="{'two': B, 'three': C}"></div>

Kedua : Dengan fungsi

<div class="aclass" ng-class="getClasses()"></div>

Dan di pengontrol Anda

$scope.A = 'one';
$scope.B = true;
$scope.C = false;

$scope.getClasses = function(){
    var classes = "";
    classes += $scope.A;
    if($scope.B) classes += " two ";
    if($scope.C) classes += " three ";
    return classes;
}

Keduanya akan menghasilkan

<div class="aclass one two"></div>
4
Okazari 29 Mei 2015, 18:24
Tahukah Anda bagaimana menambahkan (atau tidak) nama kelas $scope.A jika $scope.B adalah true (atau false)? Misalnya, jika A='something' dan B=true -> <div class="something"> dan jika A='other' dan B=false -> <div></div>. Terima kasih atas jawaban Anda!
 – 
cespon
29 Mei 2015, 18:59
Cukup gunakan solusi kedua dalam kasus ini. Anda bebas menambahkan logika sebanyak yang Anda mau. if($scope.B) kelas += $scope.A
 – 
Okazari
29 Mei 2015, 19:03
Saya kira maksud Anda tidak mungkin melakukan html sebaris. Apakah saya benar?
 – 
cespon
29 Mei 2015, 19:19