javascript - AngularJS menerapkan kelas ke beberapa tombol secara eksklusif satu sama lain

Saya baru di AngularJS, dengan latar belakang jQuery, dan masih mencoba untuk memahami berpikir Angular. Saya memiliki beberapa button seperti:

<button class="btn active">btn1</button>
<button class="btn">btn2</button>
...
<button class="btn">btnN</button>

Dengan jQuery untuk mencapai tujuan saya, yaitu memiliki class active hanya pada satu button pada satu waktu, saya akan melakukan

jQuery

$(".btn").on('click', function(){
 $(this).siblings().removeClass('active')
        .end()
        .addClass('active');
});

CSS

.active{ ... }

tetapi saya tidak menemukan cara umum untuk melakukan ini di Angular. Saya menemukan solusi untuk 3 tombol, tetapi itu menjadi kasar, terutama jika saya memiliki beberapa route di aplikasi saya.

Secara khusus, sekarang solusi yang saya gunakan adalah:

markup

<li class="start" ng:click="selected = 1" ng-class="{active: selected == 1}">
 <a href="#contenuti> </a>
</li>
<li class="start" ng:click="selected = 2" ng-class="{active: selected == 2}">
 <a href="#utenti> </a>
</li>
<li class="start" ng:click="selected = 3" ng-class="{active: selected == 3}">
 <a href="#messaggi> </a> 
</li>

DI CONTROLLER (untuk pengaturan bootstrap)

switch($location.path()){
 case '/contenuti/plot': 
  $scope.selected = 1;
  break;
 case '/utenti': 
  $scope.selected = 2;
  break;
 case '/messaggi': 
  $scope.selected = 3;
  break;
}

yang merupakan solusi yang sebenarnya tidak saya sukai, saya rasa itu bukan solusi yang benar-benar baik. Terima kasih sebelumnya atas bantuan Anda.

Solusi jQuery Fiddle: http://jsfiddle.net/HS4d6/

Jawaban #1

Selamat datang di dunia Angular -- itu sedikit berbeda dari jQuery. Tapi Anda akan menyukainya!

Ada banyak hal hebat di Angular, tetapi yang terbaik di antaranya adalah directive!

Berikut adalah kerangka solusi yang cukup umum dan bekerja tanpa perlu khawatir tentang lingkup saat ini sama sekali. Pada dasarnya ini menggunakan fungsi inisialisasi direktif untuk komunikasi antar-instansi. Tinggal beri tahu saya jika Anda mengalami masalah saat memperluasnya sesuai kebutuhan spesifik Anda.

app.directive('selectable', function(){

    var selected;

    var unselect = function(element) {
        element.removeClass('selected');
    }

    var select = function(element) {
        if (selected){
            unselect(selected);
        }
        selected = element;
        element.addClass('selected');
    }

    return {

        link : function(scope, element, attrs){

            element.on('click', function(){
                select(element);
            });

        }
    }
});

PLNKR

Jawaban #2

Karena semua tombol Anda tampaknya sangat mirip, Anda bisa menggunakan ng-repeat seperti ini:

<li data-ng-repeat="button in buttons" data-ng-class="{ active: button.url == location.path() }></li>

Dan kemudian pengontrol Anda akan seperti ini:

function myController($scope....){
    $scope.location = $location;

    $scope.buttons = [
        { url: '/contenuti/plot' },
        { url: '/utenti' },
        { url: '/messaggi' }
    ];
}

Akan mudah menambahkan lebih banyak tombol dengan cara ini dan membuatnya bekerja secara otomatis. Jelas, ubah sesuai kebutuhan Anda sendiri.