it-swarm-id.com

Apa cara terbaik untuk menerapkan kelas secara kondisional?

Katakanlah Anda memiliki larik yang dirender dalam ul dengan li untuk setiap elemen dan properti pada pengontrol yang disebut selectedIndex. Apa cara terbaik untuk menambahkan kelas ke li dengan indeks selectedIndex di AngularJS?

Saat ini saya menduplikasi (dengan tangan) kode li dan menambahkan kelas ke salah satu tag li dan menggunakan ng-show dan ng-hide untuk menunjukkan hanya satu li per indeks.

1162
respectTheCode

Jika Anda tidak ingin memasukkan nama kelas CSS ke Controller seperti yang saya lakukan, ini adalah trik lama yang saya gunakan sejak pra-v1 hari. Kami dapat menulis ekspresi yang mengevaluasi langsung ke nama kelas terpilih , tidak ada arahan khusus yang diperlukan:

ng:class="{true:'selected', false:''}[$index==selectedIndex]"

Harap perhatikan sintaks lama dengan titik dua.

Ada juga cara baru yang lebih baik untuk menerapkan kelas secara kondisional, seperti:

ng-class="{selected: $index==selectedIndex}"

Angular sekarang mendukung ekspresi yang mengembalikan objek. Setiap properti (nama) objek ini sekarang dianggap sebagai nama kelas dan diterapkan tergantung pada nilainya.

Namun cara-cara ini secara fungsional tidak sama. Berikut ini sebuah contoh:

ng-class="{admin:'enabled', moderator:'disabled', '':'hidden'}[user.role]"

Karena itu kami dapat menggunakan kembali kelas CSS yang ada dengan memetakan properti model pada nama kelas dan pada saat yang sama menjauhkan kelas CSS dari kode Controller.

1378
orcun

ng-class mendukung ekspresi yang harus dievaluasi

  1. String nama kelas yang dibatasi ruang, atau
  2. Array nama kelas, atau
  3. Peta/objek nama kelas ke nilai boolean.

Jadi, menggunakan form 3) kita cukup menulis

ng-class="{'selected': $index==selectedIndex}"

Lihat juga Bagaimana cara menerapkan gaya CSS secara bersyarat di AngularJS? untuk jawaban yang lebih luas.


Perbarui : Angular 1.1.5 telah menambahkan dukungan untuk operator ternary , jadi jika konstruk itu lebih familiar bagi Anda:

ng-class="($index==selectedIndex) ? 'selected' : ''"
434
Mark Rajcok

Metode favorit saya adalah menggunakan ekspresi ternary.

ng-class="condition ? 'trueClass' : 'falseClass'"

Catatan: Jika Anda menggunakan versi Angular yang lebih lama, Anda harus menggunakan ini,

ng-class="condition && 'trueClass' || 'falseClass'"
158
skmvasu

Aku akan menambah ini, karena beberapa jawaban ini tampak keluar dari tanggal. Begini cara saya melakukannya:

<class="ng-class:isSelected">

Di mana 'IsSelected' adalah variabel javascript didefinisikan dalam controller sudut scoped.


[. .____] Untuk lebih spesifik menjawab pertanyaan Anda, berikut adalah cara Anda mungkin menghasilkan daftar dengan itu:

HTML

<div ng-controller="ListCtrl">  
    <li class="ng-class:item.isSelected" ng-repeat="item in list">   
       {{item.name}}
    </li>  
</div>


JS

function ListCtrl($scope) {    
    $scope.list = [  
        {"name": "Item 1", "isSelected": "active"},  
        {"name": "Item 2", "isSelected": ""}
    ]
}


[. .____] Lihat: http://jsfiddle.net/tTfWM/

Lihat: http://docs.angularjs.org/api/ng.directive:ngClass

54
stefano

Berikut ini adalah solusi yang lebih sederhana:

function MyControl($scope){
    $scope.values = ["a","b","c","d","e","f"];
    $scope.selectedIndex = -1;
    
    $scope.toggleSelect = function(ind){
        if( ind === $scope.selectedIndex ){
            $scope.selectedIndex = -1;
        } else{
            $scope.selectedIndex = ind;
        }
    }
    
    $scope.getClass = function(ind){
        if( ind === $scope.selectedIndex ){
            return "selected";
        } else{
            return "";
        }
    }
       
    $scope.getButtonLabel = function(ind){
        if( ind === $scope.selectedIndex ){
            return "Deselect";
        } else{
            return "Select";
        }
    }
}
.selected {
    color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<div ng-app ng-controller="MyControl">
    <ul>
        <li ng-class="getClass($index)" ng-repeat="value in values" >{{value}} <button ng-click="toggleSelect($index)">{{getButtonLabel($index)}}</button></li>
    </ul>
    <p>Selected: {{selectedIndex}}</p>
</div>
46
user81962

Saya menghadapi masalah yang sama baru-baru ini dan memutuskan untuk hanya membuat filter bersyarat:

  angular.module('myFilters', []).
    /**
     * "if" filter
     * Simple filter useful for conditionally applying CSS classes and decouple
     * view from controller 
     */
    filter('if', function() {
      return function(input, value) {
        if (typeof(input) === 'string') {
          input = [input, ''];
        }
        return value? input[0] : input[1];
      };
    });

Dibutuhkan argumen tunggal, yang merupakan array 2-elemen atau string, yang akan berubah menjadi array yang ditambahkan string kosong sebagai elemen kedua:

<li ng-repeat="item in products | filter:search | orderBy:orderProp |
  page:pageNum:pageLength" ng-class="'opened'|if:isOpen(item)">
  ...
</li>
26
Lèse majesté

Jika Anda ingin melampaui evaluasi biner dan menjauhkan CSS dari pengontrol Anda, Anda dapat menerapkan filter sederhana yang mengevaluasi input terhadap objek peta:

angular.module('myApp.filters, [])
  .filter('switch', function () { 
      return function (input, map) {
          return map[input] || '';
      }; 
  });

Ini memungkinkan Anda untuk menulis markup Anda seperti ini:

<div ng-class="muppets.star|switch:{'Kermit':'green', 'Miss Piggy': 'pink', 'Animal': 'loud'}">
    ...
</div>
21
Joe Steele

Saya baru-baru ini melakukan yang melakukan ini:

<input type="password"  placeholder="Enter your password"
ng-class="{true: 'form-control isActive', false: 'isNotActive'}[isShowing]">

Nilai isShowing adalah nilai yang terletak pada pengontrol saya yang beralih dengan klik tombol dan bagian-bagian antara tanda kurung tunggal adalah kelas yang saya buat dalam file css saya.

EDIT: Saya juga ingin menambahkan bahwa codeschool.com memiliki kursus gratis yang disponsori oleh google di AngularJS yang membahas semua hal ini dan kemudian beberapa. Tidak perlu membayar apa pun, cukup daftar untuk akun dan mulai! Semoga sukses untuk Anda semua!

16
Pytth

Operator ternary baru saja ditambahkan ke pengurai sudut dalam 1.1.5 .

Jadi cara paling sederhana untuk melakukan ini adalah sekarang:

ng:class="($index==selectedIndex)? 'selected' : ''"
15
lionroots

Kita dapat membuat fungsi untuk mengelola kelas kembali dengan kondisi

 enter image description here

<script>
    angular.module('myapp', [])
            .controller('ExampleController', ['$scope', function ($scope) {
                $scope.MyColors = ['It is Red', 'It is Yellow', 'It is Blue', 'It is Green', 'It is Gray'];
                $scope.getClass = function (strValue) {
                    switch(strValue) {
                        case "It is Red":return "Red";break;
                        case "It is Yellow":return "Yellow";break;
                        case "It is Blue":return "Blue";break;
                        case "It is Green":return "Green";break;
                        case "It is Gray":return "Gray";break;
                    }
                }
        }]);
</script>

Lalu

<body ng-app="myapp" ng-controller="ExampleController">

<h2>AngularJS ng-class if example</h2>
<ul >
    <li ng-repeat="icolor in MyColors" >
        <p ng-class="[getClass(icolor), 'b']">{{icolor}}</p>
    </li>
</ul>
<hr/>
<p>Other way using : ng-class="{'class1' : expression1, 'class2' : expression2,'class3':expression2,...}"</p>
<ul>
    <li ng-repeat="icolor in MyColors">
        <p ng-class="{'Red':icolor=='It is Red','Yellow':icolor=='It is Yellow','Blue':icolor=='It is Blue','Green':icolor=='It is Green','Gray':icolor=='It is Gray'}" class="b">{{icolor}}</p>
    </li>
</ul>

Anda dapat merujuk ke halaman kode lengkap di ng-class jika contoh

11
Lewis Hai

Ini berfungsi seperti pesona;)

<ul class="nav nav-pills" ng-init="selectedType = 'return'">
    <li role="presentation" ng-class="{'active':selectedType === 'return'}"
        ng-click="selectedType = 'return'"><a href="#return">return

    </a></li>
    <li role="presentation" ng-class="{'active':selectedType === 'oneway'}"
        ng-click="selectedType = 'oneway'"><a href="#oneway">oneway
    </a></li>
</ul>
9
Aliti

Saya baru mengenal Angular tetapi telah menemukan ini untuk menyelesaikan masalah saya:

<i class="icon-download" ng-click="showDetails = ! showDetails" ng-class="{'icon-upload': showDetails}"></i>

Ini secara kondisional akan menerapkan kelas berdasarkan var. Dimulai dengan ikon-unduh sebagai default, menggunakan kelas-ng, saya memeriksa status showDetails jika true/false dan menerapkan kelas ikon-unggah . Ini bekerja dengan baik.

Semoga ini bisa membantu.

9
Ravi Ram

Ini mungkin akan diturunkan untuk dilupakan, tetapi di sini adalah bagaimana saya menggunakan operator ternary 1.1.5 untuk beralih kelas tergantung pada apakah baris dalam tabel adalah yang pertama, tengah atau terakhir - kecuali jika hanya ada satu baris dalam tabel:

<span class="attribute-row" ng-class="(restaurant.Attributes.length === 1) || ($first ? 'attribute-first-row': false || $middle ? 'attribute-middle-row': false || $last ? 'attribute-last-row': false)">
</span>
5
sundar

Berikut adalah opsi lain yang berfungsi dengan baik ketika ng-class tidak dapat digunakan (misalnya saat menata SVG):

ng-attr-class="{{someBoolean && 'class-when-true' || 'class-when-false' }}"

(Saya pikir Anda harus menggunakan Angular yang tidak stabil terbaru untuk menggunakan ng-attr-, saya saat ini di 1.1.4)

4
Ashley Davis

sebagian

  <div class="col-md-4 text-right">
      <a ng-class="campaign_range === 'thismonth' ? 'btn btn-blue' :  'btn btn-link'" href="#" ng-click='change_range("thismonth")'>This Month</a>
      <a ng-class="campaign_range === 'all' ? 'btn btn-blue' :  'btn btn-link'" href="#" ng-click='change_range("all")'>All Time</a>
  </div>

pengontrol

  $scope.campaign_range = "all";
  $scope.change_range = function(range) { 
        if (range === "all")
        {
            $scope.campaign_range = "all"
        }
        else
        {  
            $scope.campaign_range = "thismonth"
        }
  };
4
Caner Çakmak

baik saya akan menyarankan Anda untuk memeriksa kondisi di controller Anda dengan fungsi yang mengembalikan true atau false .

<div class="week-wrap" ng-class="{today: getTodayForHighLight(todayDate, day.date)}">{{day.date}}</div>

dan di controller Anda periksa kondisinya

$scope.getTodayForHighLight = function(today, date){
return (today == date);
}
4
sheelpriy

Ini dalam pekerjaan saya, beberapa hakim kondisional:

<li ng-repeat='eOption in exam.examOptions' ng-class="exam.examTitle.ANSWER_COM==exam.examTitle.RIGHT_ANSWER?(eOption.eoSequence==exam.examTitle.ANSWER_COM?'right':''):eOption.eoSequence==exam.examTitle.ANSWER_COM?'wrong':eOption.eoSequence==exam.examTitle.RIGHT_ANSWER?'right':''">
  <strong>{{eOption.eoSequence}}</strong> &nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;
  <span ng-bind-html="eOption.eoName | to_trusted">2020 元</span>
</li>
4
H.jame

Hanya menambahkan sesuatu yang bekerja untuk saya hari ini, setelah banyak mencari ...

<div class="form-group" ng-class="{true: 'has-error'}[ctrl.submitted && myForm.myField.$error.required]">

Semoga ini membantu dalam pengembangan sukses Anda.

=)

Sintaks Ekspresi Tidak Berdokumen: Tautan Situs Web Hebat ... =)

3
Robert Green MBA

Jika Anda memiliki kelas umum yang diterapkan ke banyak elemen, Anda dapat membuat arahan khusus yang akan menambahkan kelas seperti ng-show/ng-hide.

Arahan ini akan menambahkan kelas 'aktif' ke tombol jika diklik

module.directive('ngActive',  ['$animate', function($animate) {
  return function(scope, element, attr) {
    scope.$watch(attr.ngActive, function ngActiveWatchAction(value){
      $animate[value ? 'addClass' : 'removeClass'](element, 'active');
    });
  };
}]);

Info lebih lanjut

3
lars1595

Jika Anda menggunakan sudut pra v1.1.5 (mis. Tidak ada operator ternary) dan Anda masih menginginkan cara yang setara untuk menetapkan nilai di keduanya ketentuan Anda dapat melakukan sesuatu seperti ini:

ng-class="{'class1':item.isReadOnly == false, 'class2':item.isReadOnly == true}"
3
Scotty.NET

Periksa http://www.codinginsight.com/angularjs-if-else-statement/

Pernyataan angularj yang terkenal itu kalau tidak !!! Ketika saya mulai menggunakan Angular, saya agak terkejut bahwa saya tidak bisa menemukan pernyataan if/else.

Jadi saya sedang mengerjakan sebuah proyek dan saya perhatikan bahwa ketika menggunakan pernyataan if/else, kondisi tersebut menunjukkan saat memuat. Anda dapat menggunakan ng-jubah untuk memperbaikinya.

<div class="ng-cloak">
 <p ng-show="statement">Show this line</span>
 <p ng-hide="statement">Show this line instead</span>
</div>

.ng-cloak { display: none }

Terima kasih amadou

3
Victor Cruz

Anda dapat menggunakan paket ini npm. Ini menangani semuanya dan memiliki opsi untuk kelas statis dan bersyarat berdasarkan pada variabel atau fungsi.

// Support for string arguments
getClassNames('class1', 'class2');

// support for Object
getClassNames({class1: true, class2 : false});

// support for all type of data
getClassNames('class1', 'class2', ['class3', 'class4'], { 
    class5 : function() { return false; },
    class6 : function() { return true; }
});

<div className={getClassNames({class1: true, class2 : false})} />
0
Tushar Sharma