2

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

我有这个：

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

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

4

6 回答 6

7

您可以使用 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-30T16:52:34.557 回答
1

您为什么不将 更改为, likeng-click以外的其他内容，然后在您的控制器中您可以定义在某个标志已经为真时调用？addForm(data)handleClick(data)handleClick(data)addForm(data)

于 2013-07-30T16:48:19.643 回答
1

另一种可能的解决方案，使用ng-clickandng-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'; 
    }

  }
};

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

这是完整的 jsFiddle。

于 2013-07-30T17:48:14.583 回答
0

尝试使用属性而不是调用函数checkF()。假装财产是mySwitch. 当你addForm()被调用时，设置mySwitch为true。

于 2013-07-30T16:48:42.097 回答
0

如何切换功能使用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;
    }

  }
};

和完整的 jsFiddle。

于 2013-07-30T18:20:43.453 回答
0

您可以通过以下示例使用 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>
于 2016-01-14T17:46:38.217 回答