AngularJS开关

我想要一个angularJs中的按钮，当我按下它时，会调用一个函数，当我再次按下它时，它会执行另一个函数，比如开关

我有这个：

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

---

我想在单击一次时调用另一个函数。

为什么不将

ng click

更改为

addForm（data）

以外的其他函数，如

handleClick（data）

，然后在控制器中定义

handleClick（data）

来调用

addForm（data）

如果某个标志已为true？

尝试使用属性而不是调用函数

checkF（）

。假设该属性是

mySwitch

。调用

addForm（）

时，将

mySwitch

设置为true。

您可以使用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');
    }
}

按钮1
按钮2
函数Ctrl（$scope）{
$scope.selected=true；
$scope.button1=函数（）{
//执行按钮1的逻辑
$scope.selected=！$scope.selected；
console.log（'btn1 clicked'）；
}
$scope.button2=函数（）{
//执行按钮2的逻辑
$scope.selected=！$scope.selected；
console.log（'btn2 clicked'）；
}
}

---

另一种可能的解决方案，使用

ng单击
和
ng类
切换类

HTML

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

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

可能有更好的方法获取当前类名

以下是。
如何使用
ng单击来切换函数

使用
ng单击时在两个函数之间切换的一种（多种）方法。它使用了与建议类似的方法

HTML

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

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

还有。
您可以通过下面的示例使用字体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>


很有趣。为什么会有像
ng class
或
angular.element
这样的指令？哦，我认为因为您使用的是
ng class
，所以您希望在单击时更改类。我有点错过了问题的重点。我更喜欢这个解决方案。通过使用两个按钮，可以很好地分离关注点。