AngularJS on-off switch

Question

Я хочу кнопку в angularJs, что когда я нажимаю ее, вызывается функция, и когда я нажимаю ее снова, она выполняет другую функцию, например, переключатель ON-OFF.

У меня есть это:

<a ng-click="addForm(data)" href=""> <div class="starOff" ng-class="{starOn: checkF(data)}"></div> </a> 

Я хотел бы, чтобы вызвать другую функцию, когда я нажимаю его один раз.

Answer 1

Почему вы не изменить ng-click к чему-то другому, чем addForm(data), как handleClick(data), а затем в контроллере можно определить handleClick(data) вызвать addForm(data) если определенный флаг уже верно?

Answer 2

Попробуйте использовать свойство вместо вызова функции checkF(). Представьте себе объект mySwitch. Когда вы вызываете addForm(), установите mySwitch в true.

Answer 3

Вы можете использовать ng-переключатель.

<div ng-app ng-controller="Ctrl"> 
    <div ng-switch on="selected"> 
     <button ng-switch-when='true' ng-click='button1()'>button1</button> 
     <button ng-switch-when='false' ng-click='button2()'>button2</button> 
    </div> 
</div> 

function Ctrl($scope) { 
    $scope.selected = true; 
    $scope.button1 = function() { 
     //do logic for button 1 
     $scope.selected = !$scope.selected; 
     console.log('btn1 clicked'); 
    } 

    $scope.button2 = function() { 
     //do logic for button 2 
     $scope.selected = !$scope.selected; 
     console.log('btn2 clicked'); 
    } 
} 

Demo on jsFiddle

Answer 4

Другим возможным решением, используя ng-click и ng-class для переключения класса.

HTML

<div ng-app="miniapp"> 
    <div ng-controller="Ctrl"> 
    <a ng-click="newClass=toggleClass($event)" ng-class="newClass" href="">Toggle</a> 
    </div> 
</div> 

JS

var $scope; 
var app = angular.module('miniapp', []); 

function Ctrl($scope) { 
    $scope.toggleClass = function(obj) { 

    if (obj.srcElement.className == 'starOn') { 
     return 'starOff'; 
    } else if (obj.srcElement.className == 'starOff') { 
     return 'starOn'; 
    } else { 
     return 'starOn'; 
    } 

    } 
}; 

Есть, вероятно, более эффективные способы, чтобы захватить имя текущего класса.

Вот full jsFiddle.

Answer 5

Как Переключение функций с помощью ng-click

один (из многих) методов для переключения между двумя функциями при использовании ng-click. Он использует аналогичный метод, который предложил tnunamak.

HTML

<div ng-app="miniapp"> 
    <div ng-controller="Ctrl"> 
    <a ng-click="toggle(toggled)" ng-init="toggled=false" href="">Toggle</a> 
    </div> 
</div> 

JS

var $scope; 
var app = angular.module('miniapp', []); 

function Ctrl($scope) { 

    $scope.toggle = function(toggled) { 

    if (toggled == false) { 
     alert('Function A'); 
     $scope.toggled = true; 
    } else if (toggled == true) { 
     alert('Function B'); 
     $scope.toggled = false; 
    } 

    } 
}; 

И в full jsFiddle.

Answer 6

Вы можете реализовать его с помощью Font-Потрясающих и угловых JS с следующим примером

<div class="onoffswitch" > 
    <input type="checkbox" name="someOnOFF" class="onoffswitch-checkbox" id="myonoffswitch6" ng-model="vm.youmodelOnOff" /> 
    <label class="onoffswitch-label" for="myonoffswitch6"> 
      <span class="onoffswitch-inner"></span> 
      <span class="onoffswitch-switch"></span> 
    </label> 
</div>