AngularJS開關開關

我想在angularJs中有一個按鈕，當我按下它時會調用一個功能，當我再次按下它時，它會執行另一個功能，如ON-OFF開關。AngularJS開關開關

我有這樣的：

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

我會打電話給另一個函數，當我點擊它一次。

來源

2013-07-30 Rodrigo Zurek

你爲什麼不改變ng-click比addForm(data)其他的東西，像handleClick(data)，然後在你的控制器，你可以定義handleClick(data)調用addForm(data)如果某個標誌已經是真的嗎？

來源

2013-07-30 16:48:19 tnunamak

嘗試使用屬性而不是調用函數checkF()。假裝酒店是mySwitch。當您撥打addForm()時，請將mySwitch設置爲true。

來源

2013-07-30 16:48:42 mitch

您可以使用ng-switch。

<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

來源

2013-07-30 16:52:34 zsong

我喜歡這個解決方案更好地實現它。通過有兩個按鈕可以很好地區分問題。 – tnunamak

另一種可能的解決方案，使用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>

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。

來源

2013-07-30 17:48:14

dom manupulaton不是處事角色的方式 –

有趣。爲什麼有類似'ng-class'或'angular.element'的指令？ –

哦，我認爲，因爲你使用的是'ng-class'，你想要改變onClick類。我有點錯過了這個問題的重點。 –

如何切換某個功能使用（很多）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>

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。

來源

2013-07-30 18:20:43

可以使用字體 - 真棒和角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>

來源

2016-01-14 17:46:38

AngularJS開關開關

回答

相關問題