La meilleure Façon de mettre un Bouton de basculement Angulaire du Matériel

Je suis à la recherche d'une solution simple à mettre en œuvre un bouton à bascule avec une coutume sélectionner /désélectionner icône dans Angulaire du Matériel.

La fonctionnalité doit être identique à la md-case (avec ng-modèle pour la sélection de l'état), mais je veux avoir ma propre icône affichée pour sélectionner /désélectionner l'état. md-case ne semblent pas soutenir des icônes personnalisées, et le rapport de bouton-manque de ng-model.

De préférence, je voudrais éviter de mettre en œuvre une coutume de la directive et ne fera ce travail par css. Est-ce possible avec Angulaire Matériel?

Merci de nous montrer ce que vous avez essayé jusqu'à présent.
J'ai pris un regard aigu à l'angle de Matériel de documentation et n'a pas été en mesure de trouver une directive qui peuvent être utilisés pour un bouton à bascule.
Comment faire pour Créer un Minimum, Complète et Vérifiable Exemple

OriginalL'auteur Waruyama | 2016-05-02

  1. 6

    Vous pouvez définir un toggle function pour créer de la bascule de l'activité dans votre contrôleur, comme ceci:

    $scope.toggle = function() {
    $scope.variable = !$scope.variable
    console.log($scope.variable);
}

    Bouton sur le code html:

    <md-button 
    ng-click="toggle()" 
    ng-class="{ 'active': variable, 'disable': !variable}">

    OriginalL'auteur oguzhan00

  2. 5

    Après quelques recherches actuellement la meilleure solution semble être l'utilisation d'un md-bouton, qui permet d'icônes personnalisées, et en l'étendant avec ng-click et ng-classe comme ceci:

    <md-button ng-click="selected = !selected" ng-class="{'selected-button' : selected}">

    Ce prend soin de l'état de sélection. Et dans le CSS j'ai peut alors définir les styles des sélectionné bouton classe

    Même si la solution est plutôt simple, je pense qu'il devrait être out-of-the-box Angulaires du Matériel pour un bouton à bascule (ou case) avec des icônes personnalisées.

    je ne sais pas pourquoi, mais ng-click="selected = !selected" n'a pas fonctionné pour moi, la mise en œuvre d'un toggle() fonction dans mon contrôleur a fait un travail.

    OriginalL'auteur Waruyama

  3. 1

    Correctement à l'aide de toutes les classes Angulaire Matériel v1.x

    <md-button class="md-icon-button" ng-click="filterToggle = !filterToggle" ng-class="{'md-primary md-raised' : filterToggle}">
    <md-tooltip md-direction="bottom">Filter</md-tooltip>
    <md-icon ng-hide="filterToggle">filter_list</md-icon>
    <md-icon ng-show="filterToggle">clear_all</md-icon>
</md-button>

    en contrôleur de jeu 

    $scope.filterToggle = false;

    OriginalL'auteur Kunal Panchal