AngularJS开关

Question

我想在angularJs中使用一个按钮，当我按下它时会调用一个函数，当我再按它时它会执行另一个功能，比如ON-OFF开关。

我有这个：

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

当我点击一次时，我会调用另一个函数。

Answer 1

您可以使用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

Answer 2

为什么不将ng-click更改为addForm(data)之外的其他内容，例如handleClick(data)，然后在您的控制器中，您可以定义handleClick(data)来调用{{1}如果某个标志已经为真？

Answer 3

另一种可能的解决方案，使用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 4

尝试使用属性而不是调用函数checkF()。假装该物业为mySwitch。调用addForm()后，请将mySwitch设置为 true 。

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-Awesome和angular 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>