AngularJS score tracker malfunctioning

Question

AngularJS score tracker malfunctioning

Can you please review this for me?

http://plnkr.co/edit/i4B0Q2ZGiuMlogvwujpg?p=preview

<input type="radio" name="op_0" ng-value="true" ng-model="n1"> True
<input type="radio" name="op_0" ng-value="false" ng-model="n2"> False
<input type="radio" name="op_0" ng-value="true" ng-model="n3"> True
<input type="radio" name="op_0" ng-value="false" ng-model="n4"> False

Could you explain why two radio buttons are being selected with just one click? And also, why isn't the score value increasing or decreasing as expected?

javascript angularjs counter

Answer 1

Answer №1

For all radio buttons to function as a group, they must share the same name attribute. The distinguishing factor should be the value assigned to each button. If the names are different, selecting one will not deselect the others.

app.controller('aCtrl', function($scope) {

  $scope.s = 0;

  $scope.updateScore = function(val){
    if(val == 'true'){
      $scope.s += 1;
    }
    if(val == 'false'){
      $scope.s += -0.5;
    }
  }

});

 <div class="col-md-5 col-xs-8">
        <input type="radio" ng-click="updateScore('true')" name="op_0" ng-value="true" ng-model="n1"> True
        <input type="radio" ng-click="updateScore('false')" name="op_0" ng-value="false" ng-model="n2"> False
        <input type="radio" ng-click="updateScore('true')" name="op_0" ng-value="true" ng-model="n3"> True
        <input type="radio" ng-click="updateScore('false')" name="op_0" ng-value="false" ng-model="n4"> False
      </div>

Answer 2

For all radio buttons to function as a group, they must share the same name attribute. The distinguishing factor should be the value assigned to each button. If the names are different, selecting one will not deselect the others.

app.controller('aCtrl', function($scope) {

  $scope.s = 0;

  $scope.updateScore = function(val){
    if(val == 'true'){
      $scope.s += 1;
    }
    if(val == 'false'){
      $scope.s += -0.5;
    }
  }

});

 <div class="col-md-5 col-xs-8">
        <input type="radio" ng-click="updateScore('true')" name="op_0" ng-value="true" ng-model="n1"> True
        <input type="radio" ng-click="updateScore('false')" name="op_0" ng-value="false" ng-model="n2"> False
        <input type="radio" ng-click="updateScore('true')" name="op_0" ng-value="true" ng-model="n3"> True
        <input type="radio" ng-click="updateScore('false')" name="op_0" ng-value="false" ng-model="n4"> False
      </div>

AngularJS score tracker malfunctioning

Answer №1

Similar questions

Obtaining targeted information from JSON using JavaScript

Reset the input field once the message has been successfully sent

Unable to get ng-submit function to work properly within the Laravel PHP framework

Utilizing Azure Mobile Services with HTML

How to showcase a list from intricate JSON data using Angular

Displaying a page with dynamic data fetched from the server-side to be utilized in the getInitialProps method of

Utilizing the splice method across multiple instances of a string

Having trouble with installing sass via Gem in the Windows terminal

Place the `service` parameter into the `run` function

Display JSON information in the present moment

"Troubleshooting an issue with ng-model not functioning properly with radio buttons in Angular

Having trouble fixing the '@material-ui/lab' error while working with the newest React update?

Adding TH into a TABLE in Angular 2 by verifying TD elements

The domain name or IP address does not correspond to the alternate names listed on the certificate

I need help figuring out how to retrieve the full path of an uploaded file in JavaScript. Currently, it only returns "c:fakepath" but I need

What is the method for initializing fancybox with the precise image index?

The combination of Material UI custom TextField and Yup does not seem to be functioning properly

What could be the reason for webpack not making jQuery available as a global variable?

Should we integrate a MongoDB database calculation app with a POST Controller in sails.js?

Javascript editing enhancement for real-time changes