ng-click function in angular js

Question

Below is my code for ng-click. I want the click event to happen only once. I was thinking of adding comparison operator at the end but not sure. Please help as I am new to angular js.

<html>
<script 
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">
</script>
<body ng-app="myApp">
<div ng-controller="myCtrl">
<p>Click the button to run a function:</p>
<button ng-click="myFunc()">OK</button>
<p>The button has been clicked {{count}} times.</p>
</div>
<script>
angular.module('myApp', [])
.controller('myCtrl', ['$scope', function($scope) {
$scope.count = 0;
$scope.myFunc = function() {
  $scope.count++;
};
}]);
</script>
</body>
</html>

Karim · Accepted Answer · 2017-05-08 09:10:52Z

4

change the button code to

<button ng-click="!count && myFunc()">OK</button>

since $scope.count is 0 at the beginning click will fire only once.

answered May 8, 2017 at 9:10

Karim

8,6823 gold badges27 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sachila Ranawaka · Accepted Answer · 2017-05-08 09:12:13Z

0

 
<script 
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">
</script> 
<div  ng-app="myApp" ng-controller="myCtrl">
<p>Click the button to run a function:</p>
<button ng-click="myFunc()">OK</button>
<p>The button has been clicked {{count}} times.</p>
</div>
<script>
angular.module('myApp', [])
.controller('myCtrl', ['$scope', function($scope) {
$scope.count = 0;
$scope.myFunc = function() {
  if( $scope.count == 1)
       return false;

   $scope.count++;
};
}]);
</script>

answered May 8, 2017 at 9:12

Sachila Ranawaka

41.6k8 gold badges62 silver badges87 bronze badges

Comments

Ramesh Rajendran · Accepted Answer · 2017-05-08 09:17:39Z

 
<script 
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">
</script> 
<div  ng-app="myApp" ng-controller="myCtrl">
<p>Click the button to run a function:</p>
  <button ng-click="count === 0 && myFunc()">OK</button>
<p>The button has been clicked {{count}} times.</p>
</div>
<script>
angular.module('myApp', [])
.controller('myCtrl', ['$scope', function($scope) {
$scope.count = 0;
$scope.myFunc = function() {
  $scope.count++;
};
}]);
</script>

Or use ng-show for hide/show the button

<button ng-show="count === 0" ng-click="myFunc()">OK</button>

like

 
<script 
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">
</script> 
<div  ng-app="myApp" ng-controller="myCtrl">
<p>Click the button to run a function:</p>
  <button ng-click="count = 0">Clear</button>
<button ng-show="count===0" ng-click="myFunc()">OK</button>

<p>The button has been clicked {{count}} times.</p>
</div>
<script>
angular.module('myApp', [])
.controller('myCtrl', ['$scope', function($scope) {
$scope.count = 0;
$scope.myFunc = function() {
  $scope.count++;
};
}]);
</script>

Collectives™ on Stack Overflow

ng-click function in angular js

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related