¿Cómo puedo hacer un botón que funcione como alternar? Mi función es algo como esto ->
$scope.update=(id, command)=> { if (command === "remove") { //logic to remove } else if (command === "add") { //logic to add } } aquí necesito pasar id y comando como parámetro en ng-click .
<button ng-click="update(data.id, 'add')" class="btn btn-primary">Add</button> <button ng-click="update(data.id, 'remove')" class="btn btn-warning">Remove</button>actualmente tengo que usar dos botones para hacer la tarea simple, ¿cómo puedo hacer que usando un botón pueda hacer lo mismo?
La pieza que te falta es almacenar el estado alternado del botón.
$scope.toggleButton = { inAddState: true }; $scope.update = (id, button) => { if (button.inAddState) { // logic to add } else { // logic to remove } // make sure you switch the state of the button at some point button.inAddState = !button.inAddState; } <button ng-click="update(data.id, toggleButton)" class="btn {{ toggleButton.inAddState ? 'btn-primary' : 'btn-warning' }}" ng-bind="toggleButton.inAddState ? 'Add' : 'Remove'"> </button> En este caso, solo hay dos lugares dentro del elemento donde se debe considerar el estado: la clase y el texto. En mi opinión, una vez que llega a tres o más, es más simple usar dos elementos con ng-if en lugar de tener un montón de condicionales dentro de un elemento. Por ejemplo, si desea que el atributo de title también sea condicional.
<button ng-click="update(data.id, toggleButton)" ng-if="toggleButton.inAddState" class="btn btn-primary" title="Click to add"> Add </button> <button ng-click="update(data.id, toggleButton)" ng-if="!toggleButton.inAddState" class="btn btn-warning" title="Click to remove"> Remove </button>en vez de
<button ng-click="update(data.id, toggleButton)" class="btn {{ toggleButton.inAddState ? 'btn-primary' : 'btn-warning' }}" ng-bind="toggleButton.inAddState ? 'Add' : 'Remove'" title="Click to {{ toggleButton.inAddState ? 'add' : 'remove' }}"> </button>