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

Getting Started with the Basic Example of Redux-Router

Is it possible to utilize Dictionaries (key, value) collections with JQuery?

Unable to run any npm scripts in a React project

"Deactivate the escaping feature in PHP when using heredoc syntax

<head> Javascript codes are failing to run

Tips for passing an object as an argument to a function with optional object properties in TypeScript

How can Angular.js directives help display various nested data structures?

The autofocus feature on the textarea in Angular Material Dialog seems to be malfunctioning

Unable to find any matches when conducting a search through Google Apps Script

Issue with loading Three.js asynchronously

Is `h` equal to `createVNode` function?

Animation triggered by scrolling is not functioning/displaying div

What is the correct procedure for utilizing variables in the parseJson function when working with string objects?

Choose particular ng-repeat elements to emphasize them in a different location

Tips for updating the First object based on certain matching values from the Second object using JavaScript

Hide the scrollbars on the sidebar

Exploring React-Query's Search Feature

Save the data from the JSON file when it is loaded

The Google Pie chart is displaying outside of the designated div area when placed inside a dropdown menu

javascript triggering before its designated event happens