单击按钮时在两个功能之间切换。

Question

我有以下按钮，我将其用作切换按钮。

<button ng-click="togglefunction()">Toggle Data</button>

这是应该起作用的切换部分

 $scope.toggleToolPanel = function () {
        // need to put below 2 functions here so that when user clicks 1st time, function 1 executes. when user clicks again, function 2 executes and so on. 
    };

这两个函数应该在 toggleFunction 中交替执行

 function function1(params) { 
                return '<span  >' + data + '</span>';
    }

function function2(params) { 
                return '<span  >' + data *100 + '</span>';
    }

Answer 1

将此添加到您的控制器：

$scope.firstFunction = false;

然后将您的 toggleToolPanel 更改为以下内容：

$scope.toggleToolPanel = function() {
    $scope.firstFunction = !$scope.firstFunction;
    if($scope.firstFunction) {
        function1(params);
    } else {
        function2(params);
    }
};

Answer 2

每次单击按钮元素时切换 class。参见 classList.toggle。在您的点击事件处理程序中，使用 classList.contains 来查找是否存在切换。有做x，没有做y。

Answer 3

更清晰的代码附在下面：

angular.module('mainModule', [])
         .controller('MainCtrl', ['$scope', function($scope) {
           $scope.toggle = function() {
        $scope.isToggled = !$scope.isToggled;
        var params = $scope.isToggled;

                $scope.isToggled ? toggleIn(params) : toggleOut(params);

           };

           function toggleIn(params) {
        console.log(params);
       }

           function toggleOut(params) {
        console.log(params);
           }


         }]);

<body ng-app="mainModule">
<div ng-controller="MainCtrl">
  <input type="button" value="Toggle" ng-click="toggle()" />
</div>

</body>

单击按钮时在两个功能之间切换。

Toggle between two functions when button clicked.

javascript

angularjs

toggle

angularjs-ng-click