这个 AngularJS 代码是怎么回事？

Question

我正在使用 Angular 处理表单，但遇到了一个奇怪的问题。该表单就像一个评分表，我想向用户显示平均评分，它是 5 个问题，基于 1-5 的分数。容易吧？

将它们加在一起并除以 5？

数学是可行的，但是如果您选择倒退的单选框.. 意味着开始选择第 5 个问题，然后转到第 1 个问题，然后在选择最后一个单选框之前停止，那么数学就很麻烦了。例如，为 5 个问题中的 4 个选择“选项 3”，平均得到 666.6？但这应该达到平均 2.4。如果您按照从问题 1 到问题 5 的正确顺序选择元素，即使您停止选择选项，数学运算也能成功？

我创建了一个小提琴，所以你可以看到这个。

http://jsfiddle.net/YGQT9/737/

HTML；

    <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>

角度

    var app = angular.module('myApp', []);
    app.controller('FormCtrl', function ($scope, $http) {

    $scope.data = {
        cat1: "",
        cat2: "",
        cat3: "",
        cat4: "",
        cat5: "",

    };

});

任何人都知道 Angular 的幕后情况是这样的吗？这对我来说没什么大不了的，但我很好奇。

Answer 1

因为你需要像这样为你的 $scope.data 设置一个初始值

$scope.data = {
        cat1: 0,
        cat2: 0,
        cat3: 0,
        cat4: 0,
        cat5: 0,

    };

您需要将对象中的每个项目都设置为int，但您将其设置为string。这就是原因:) 希望它有所帮助

Answer 2

这是一个小插曲

https://plnkr.co/edit/hdGaRDmq8ZYw62tBVsCj?p=preview

我稍微简化了您的代码/html。 只需使用 ng 重复来创建单选按钮数组。

让你的模型成为一个数组。

求模型值的平均值并除以已填充的任何行（如果未填充任何行，则显示 0）

html

<div ng-app="myApp">
    <div ng-controller="myCtrl as vm">
  <div ng-repeat = "j in [1,2,3,4,5]">
     <span ng-repeat = " i in [1,2,3,4,5]">
      <input type="radio" 
       ng-value=i name="cat{{j}}" ng-model="vm.model[j]">{{$index + 1}}
     </span>
     </div>
     {{vm.getAverage()}}
    </div>
</div>

js

(function() {
    'use strict';
angular
  .module('myApp', [])
  .controller('myCtrl', myCtrl);

   function myCtrl(){
       /* jshint validthis: true */
       var vm=this;
       vm.model = [];
       vm.getAverage = getAverage;

       function getAverage(){
        return vm.model.reduce((a, b) => a + b, 0)/vm.model.filter(i => i > 0).length || 0
       }
   } 

})();

Answer 3

这是因为你的ng-model 暗示所有输入值默认都是字符串，所以你在这里做什么

Avg Selected: {{ (data.cat1 + data.cat2 + data.cat3 + data.cat4 + data.cat5) / 5|number }}

实际上是附加字符串，然后尝试除法，但最终返回一个字符串，该字符串一旦附加，就会转换为数字并除法。

所以..

"" + 1 将返回一个字符串，将该字符串除以 5 将神奇地返回 0.2。

但是，如果将所有 3 个选项设置为一个，您将得到 111 字符串除以 5 后得到 22.2。