如何在角度js中将两个功能分配给单个切换按钮



我想在单击按钮名称后更改按钮名称。有两个不同的函数加和减。第一次按钮名称是"添加",当它单击时,它应该执行添加数字功能,然后名称动态将按钮名称更改为减去,一旦我单击减去它应该执行减法功能,然后再次按钮的名称来到添加这是以前的。我该怎么做?当按钮切换为添加时,如何调用不同的函数,例如添加函数,反之亦然。

现在我可以在两个按钮之间切换,但面临调用加减函数的问题。

<div ng-app="myModule">
<div ng-controller="myController">
<button ng-click="toggle = !toggle">
{{ toggle ? 'Add' : 'Subtract' }}
</button>
</div>
</div>

瓦尔沙,你能检查一下这个工作小提琴吗?你想要这个吗?

说明:您可以使用标志(在本例中为 functionToBeCall(调用目标函数并切换按钮的文本。

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="personCtrl">
<button ng-click="functionToBeCalled == 'Add' ? add() : substract();">
{{ functionToBeCalled }}
</button>
<br>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
$scope.functionToBeCalled = "Add";
$scope.add = function() {
	$scope.functionToBeCalled = "Substract";
alert('Add is clicked');
};

$scope.substract = function() {
	$scope.functionToBeCalled = "Add";
alert('Substract is clicked');
};
});
</script>
</body>
</html>

您可能希望定义 2 个按钮并使用ng-if一次显示其中一个按钮。 如果不满足条件,ng-if从 DOM 中删除该按钮。请参阅官方文档:https://docs.angularjs.org/api/ng/directive/ngIf

<div ng-app="myModule">
<div ng-controller="myController">
<button ng-if="toggle" ng-click="add()">
Add
</button>
<button ng-if="!toggle" ng-click="subtract()">
Subtract
</button>
</div>
</div>

最新更新