AngularJS Simple click counter not working

Question

I'm trying to build a counter functionality. I'm using AngularJS with Bootstrap button group and I'm not sure where the conflict is. Below is my code. Can someone please help?

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<body>
<div ng-app="meetingDetail" ng-controller="meetingDetailCtrl">

<div class="col-md-12">

    <div class="btn-group" data-toggle="buttons">
  <label class="btn btn-success btn-sm">
    <input type="radio" name="radioSecondBy" ng-click = "yesCount = yesCount+1" id="vYes" autocomplete="off">Yes
  </label>
  <label class="btn btn-warning btn-sm">
    <input type="radio" name="radioSecondBy" ng-click = "yesCount = yesCount+1" id="vNo" autocomplete="off"> No
  </label>
  <label class="btn btn-info btn-sm">
    <input type="radio" name="radioSecondBy" ng-click = "yesCount = yesCount+1" id="vAbstain" autocomplete="off"> Abstain
  </label>
</div>

{{yesCount}}

</div>
<script>
var app = angular.module('meetingDetail', []);
app.controller('meetingDetailCtrl', function($scope) {
    $scope.yesCount= 0;
});
</script>

</body>
</html>

are you getting any error in the console?

Jahongir Rahmonov
– Jahongir Rahmonov

2016-08-31 04:33:40 +00:00
Commented Aug 31, 2016 at 4:33 — Jahongir Rahmonov
– Jahongir Rahmonov, Commented Aug 31, 2016 at 4:33
You can not use ng-click in <input /> tag

ojus kulkarni
– ojus kulkarni

2016-08-31 04:43:11 +00:00
Commented Aug 31, 2016 at 4:43 — ojus kulkarni
– ojus kulkarni, Commented Aug 31, 2016 at 4:43
I'm getting undefined for the variable

Kiran Kolli
– Kiran Kolli

2016-08-31 04:44:54 +00:00
Commented Aug 31, 2016 at 4:44 — Kiran Kolli
– Kiran Kolli, Commented Aug 31, 2016 at 4:44

Anik Islam Abhi · Accepted Answer · 2016-08-31 04:48:59Z

Radio buttons don't have click event.

Put click event on label instead of radio button

Like this

  <label ng-click = "yesCount = yesCount+1" class="btn btn-info btn-sm">
    <input type="radio" name="radioSecondBy"  id="vAbstain" autocomplete="off"> Abstain
  </label>

<!DOCTYPE html>
<html>
  <head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    </head>
<body>
<div ng-app="meetingDetail" ng-controller="meetingDetailCtrl">

<div class="col-md-12">

    <div class="btn-group" data-toggle="buttons">
  <label class="btn btn-success btn-sm" ng-click = "yesCount = yesCount+1">
    <input type="radio" name="radioSecondBy"  id="vYes" autocomplete="off">Yes
  </label>
  <label class="btn btn-warning btn-sm" ng-click = "yesCount = yesCount+1" >
    <input type="radio" name="radioSecondBy" id="vNo" autocomplete="off"> No
  </label>
  <label ng-click = "yesCount = yesCount+1" class="btn btn-info btn-sm">
    <input type="radio" name="radioSecondBy"  id="vAbstain" autocomplete="off"> Abstain
  </label>
</div>
{{yesCount}}


</div>
</div>
  <script>
var app = angular.module('meetingDetail', []);
app.controller('meetingDetailCtrl', function($scope) {
    $scope.yesCount= 0;

});
</script>

</body>
</html>

Community · Accepted Answer · 2017-05-23 12:32:49Z

0

ng-click does not work on radio buttons. You can use either ng-change or watch the variable

1) ng-change

<input type="radio" name="radioSecondBy" ng-change= "yesCount = yesCount+1" id="vYes" autocomplete="off">Yes

2) $watch

$scope.$watch('yesCount', function(value) {
       $scope.yesCount = $scope.yesCount + 1;
 });

here is the similar question

edited May 23, 2017 at 12:32

CommunityBot

11 silver badge

answered Aug 31, 2016 at 4:46

Code Guru

15.8k31 gold badges147 silver badges214 bronze badges

1 Comment

Anik Islam Abhi Over a year ago

change ng-chaneg to ng-change

Collectives™ on Stack Overflow

AngularJS Simple click counter not working

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related