Question

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

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

数学运算正常，但是如果你选择向后移动的方框..意思是开始选择5个问题，然后转到问题1，然后在选择最后一个单选框之前停止，数学就完全搞砸了。例如，选择＆＃34;选项3＆＃34; 5个问题中有4个问题的平均值为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>

Angular

    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

这是一个plunkr

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

我简化了你的代码/ html。只需使用重复按钮来创建单选按钮阵列。

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

找到模型值的平均值并除以已填充的任何行（如果没有填充的行显示为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个选项都设置为1，则会得到111除以5的字符串为22.2。

这个AngularJS代码发生了什么？

3 个答案: