Как ограничить количество нажатий кнопок в Angular? - PullRequest
Новая
       4

Как ограничить количество нажатий кнопок в Angular?

0 голосов
/ 19 июня 2020

Я пытаюсь сделать кнопку нефункциональной после того, как количество нажатий будет равно значению, введенному в текстовый мальчик. 

<!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>

Ответы [ 3 ]

0 голосов
/ 19 июня 2020

Если вы ищете реализацию Angular 2+, вы можете использовать двустороннюю привязку к директиве ngModel. Попробуйте следующее:

Контроллер 

export class AppComponent  {
  buttonCount = 0;
  studentCount = 0;

  onClick() {
    this.buttonCount++;
  }
}

Контроллер 

Student <input [(ngModel)]="studentCount" (keyup)="buttonCount = 0" type="input"> <br> 
Number input: {{ studentCount }}
<br><br>
<button [disabled]="buttonCount >= studentCount" (mouseup)="onClick()">Click me</button>
<br>
Button clicks: {{ buttonCount }}

Событие (keyup)="buttonCount = 0" в теге input сбрасывает счетчик нажатий кнопки каждый раз, когда вводится значение во входных данных.

Рабочий пример: Stackblitz

Если вы новичок в Angular, я бы порекомендовал вам от go до это учебник. В нем представлены некоторые основы.

0 голосов
/ 19 июня 2020

Вы можете использовать директиву ng-disabled . Вы можете отключить кнопку после количества нажатий.

0 голосов
/ 19 июня 2020

Я бы сделал что-то вроде этого:

Добавьте к кнопке атрибут 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. Это гораздо более интуитивно понятный ИМО.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...