时间戳

首页 > 解决方案 > 如何限制Angular中的按钮点击次数？

angularjs - 如何限制Angular中的按钮点击次数？

问题描述

在点击次数等于在文本男孩中输入的值后，我试图使按钮不起作用。

<!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="myCtrl">
Student <input type="input" ng-model="number"> <br> 
<p> {{number}} </p>
<button ng-click= "myFunction()">Click Me!</button>
<p>{{ count }}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.count=0;
$scope.number;
$scope.myFunction = function() {
    $scope.count++;
    $scope.count <= $scope.number;
  }
});
</script> 

</body>
</html>

标签： angularjs

解决方案

我会做这样的事情：

为按钮添加一个ng-disabled属性，这将在表达式为真时禁用按钮。

<!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="myCtrl">
Student <input type="input" ng-model="number"> <br> 
<p> {{number}} </p>
<button ng-disabled="count >= number" ng-click= "myFunction()">Click Me!</button>
<p>{{ count }}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.count=0;
$scope.number;
$scope.myFunction = function() {
    $scope.count++;
    $scope.count <= $scope.number;
  }
});
</script> 

</body>
</html>

如果您刚开始并且可以切换，我建议您尝试 Angular 2+ 而不是 AngularJS。IMO 更加直观。

推荐阅读