angularjs - color - Alternar clase con ng-clic en varios elementos

ng-style background color

Question

¿Cómo puedo alternar clases en varios elementos individualmente con ng-click?

En esta pregunta, https://stackoverflow.com/a/22072110/2169327 alternar clases con un clic se hizo así:

CSS:

.red {
    color: red;
}

JS:

$scope.toggle = false;

HTML:

<button id="btn" ng-click="toggle = !toggle" ng-class="{''red'' : toggle}">Change Class</button>

Pero, ¿y si tengo varios botones que cada uno debe alternar su propia clase con ng-clic?

Si lo configuro de esta manera:

HTML:

<button id="btn" ng-click="toggle = !toggle" ng-class="{''red'' : toggle}">Change Class</button>
<button id="btn2" ng-click="toggle = !toggle" ng-class="{''red'' : toggle}">Change Class</button>

Ambos botones se cambian si presiono uno.

Sé que una solución alternativa es definir un evento propio ng-click para cada botón (f.ex alternar1 para el botón1, alternar2 para el botón2) - pero, ¿es esta la mejor manera?

Answer 1

Dependiendo de sus requisitos, es posible que pueda utilizar una ng-repeat con una matriz que represente los conmutadores. Por ejemplo:

Su punto de vista:

<div ng-repeat="toggle in toggles">
    <button id="btn" ng-click="toggle.state = !toggle.state" ng-class="{''red'' : toggle.state}">Change Class</button>
</div>

Dentro de tu controlador:

$scope.toggles = [{ state: true }, { state: false }, { state: true }];

De esta forma, puede ampliar el conjunto de botones simplemente actualizando la matriz o los objetos de la matriz interna (en caso de que necesite más complejidad).

Answer 2

Hice una directiva simple para probar:

module.directive(''toggleClass'', function() {
    return {
        restrict: ''A'',
        link: function(scope, element, attrs) {
            element.bind(''click'', function() {
                element.toggleClass(attrs.toggleClass);
            });
        }
    };
});

para que pueda hacer cualquier elemento alternar clase que necesita

<button id="btn" toggle-class="active">Change Class</button>
<div toggle-class="whatever"></div>