Currently, I'm grappling with a form in Angular that's presenting me with an unusual complication. The form resembles a rating system where users are asked to rate 5 questions on a scale of 1-5. Seems simple enough, right?
Add up the scores and divide by 5, correct?
The math checks out, but here's where it gets interesting - if you choose the radio boxes in reverse order (from question 5 to question 1) and halt before selecting the last option, the calculations go haywire. For instance, picking "option 3" for 4 out of 5 questions yields an average of 666.6. However, it should actually be 2.4. Yet, when you select the options in the correct sequence from question 1 to question 5, everything adds up correctly even if you stop half-way.
I've created a fiddle so you can observe this phenomenon.
http://jsfiddle.net/YGQT9/737/
Here's the snippet of HTML code:
<div ng-app="myApp">
<form name="saveTemplateData" action="#" ng-controller="FormCtrl">
<input type='radio' ng-value="1" name="cat1" ng-model="data.cat1">1
<input type='radio' ng-value="2" name="cat1" ng-model="data.cat1">2
<input type='radio' ng-value="3" name="cat1" ng-model="data.cat1">3
<input type='radio' ng-value="4" name="cat1" ng-model="data.cat1">4
<input type='radio' ng-value="5" name="cat1" ng-model="data.cat1">5
---- Selected: {{ data.cat1 }} # DO NOT SELECT
<br />
<input type='radio' ng-value="1" name="cat2" ng-model="data.cat2">1
<input type='radio' ng-value="2" name="cat2" ng-model="data.cat2">2
<input type='radio' ng-value="3" name="cat2" ng-model="data.cat2">3
<input type='radio' ng-value="4" name="cat2" ng-model="data.cat2">4
<input type='radio' ng-value="5" name="cat2" ng-model="data.cat2">5
---- Selected: {{ data.cat2 }} # STOP HERE
<br />
<input type='radio' ng-value="1" name="cat3" ng-model="data.cat3">1
<input type='radio' ng-value="2" name="cat3" ng-model="data.cat3">2
<input type='radio' ng-value="3" name="cat3" ng-model="data.cat3">3
<input type='radio' ng-value="4" name="cat3" ng-model="data.cat3">4
<input type='radio' ng-value="5" name="cat3" ng-model="data.cat3">5
---- Selected: {{ data.cat3 }} # NEXT HERE
<br />
<input type='radio' ng-value="1" name="cat4" ng-model="data.cat4">1
<input type='radio' ng-value="2" name="cat4" ng-model="data.cat4">2
<input type='radio' ng-value="3" name="cat4" ng-model="data.cat4">3
<input type='radio' ng-value="4" name="cat4" ng-model="data.cat4">4
<input type='radio' ng-value="5" name="cat4" ng-model="data.cat4">5
---- Selected: {{ data.cat4 }} # NEXT HERE
<br />
<input type='radio' ng-value="1" name="cat5" ng-model="data.cat5">1
<input type='radio' ng-value="2" name="cat5" ng-model="data.cat5">2
<input type='radio' ng-value="3" name="cat5" ng-model="data.cat5">3
<input type='radio' ng-value="4" name="cat5" ng-model="data.cat5">4
<input type='radio' ng-value="5" name="cat5" ng-model="data.cat5">5
---- Selected: {{ data.cat5 }} # START HERE
<br />
Avg Selected: {{ (data.cat1 + data.cat2 + data.cat3 + data.cat4 + data.cat5) / 5|number }}
</form>
</div>
And now for the Angular code:
var app = angular.module('myApp', []);
app.controller('FormCtrl', function ($scope, $http) {
$scope.data = {
cat1: "",
cat2: "",
cat3: "",
cat4: "",
cat5: "",
};
});
Does anyone have insights into what may be causing this odd behavior in Angular? It's not critical for my project, but the curiosity is definitely piqued!