我正在开发一个游戏,我需要让用户在上一个级别完成时选择下一个级别。最多可以升至7级。
我需要能够更改按钮上的文本以指示下一个标签号,最多7个。
因此,在控制器中,我需要阅读之前显示的按钮文本,以便可以显示下一个数字。
有人可以帮忙吗?这是我的Codepen codepen link
以及到目前为止我尝试过的随附代码
<html ng-app="myApp">
<body ng-controller="myCtrl">
<div id="nextlevel">
<h3>Level Completed!</h3>
<button id="nextplay" ng-model="number" ng-init="buttontext='Level
2'">{{buttontext}}</button>
</div>
</body>
</html>
和控制器-
myApp = angular.module("myApp",[]);
myApp.controller("myCtrl", function($scope){
document.getElementById("nextplay").addEventListener('click', function() {
nextlevel.style.display = 'none';
setTimeout(function() {
nextlevel.style.display = '';
}, 500);
if ($scope.number <=7) {
$scope.number = $scope.number + 1;
}
el.emit('gameStarted', {});
});
$scope.buttontext = "Level " + $scope.number;
});
我不确定如何将按钮文本的值更新为下一个值。
答案 0 :(得分:1)
这是一个解决方案,我建议注意一些注意事项:
<html ng-app="myApp">
<body ng-controller="myCtrl">
<div id="nextlevel">
<h3>Level Completed!</h3>
<button id="nextplay" ng-click="buttonClicked()">
Level {{number}}
</button>
</div>
</body>
</html>
myApp = angular.module("myApp",[]);
myApp.controller("myCtrl", function($scope) {
$scope.number = 1;
$scope.buttonClicked = function() {
nextlevel.style.display = 'none';
setTimeout(function() {
nextlevel.style.display = '';
}, 500);
$scope.number++;
}
});
在AngularJs中,有一个名为“ ng-click”的指令而不是“ addEventListener”,它调用控制器的$ scope中包含的函数。
级别可以直接与绑定$ scope变量(称为“ number”)的HTML一起编写。
此处不需要指令“ ng-init”。