[英]How do I display sum of ng-repeat elements on their change?
我有一个ng-repeat
生成的<Select>
集,其中包含一个数值。 我希望每当用户更改一个<Select>
时,它们的总数字总和就会显示出来。 {{option.score}}
代表我希望分配给总计的数值。
图片:
https://cdn.pbrd.co/images/NGg0gJn.png
模板:
<label class="item item-input item-select" ng-repeat="criteria in tool.criterias">
<div class="input-label">
{{criteria.desc}}
</div>
<select>
<option ng-repeat="option in criteria.options">
{{option.score}} — {{option.answer}}
</option>
</select>
</label>
...
<p>Total: the sum of all the option.score's</p>
控制器:
.controller('FullToolsCtrl', function ($scope, $stateParams, Tools) {
$scope.tool = Tools.get($stateParams.toolId);
});
数据:
{
"criterias": [
{
"desc": "Complexion",
"options": [
{
"answer": "Blue or Pale all over",
"score": "0"
},
{
"answer": "Blue at extremities",
"score": "1"
},
{
"answer": "No cyanosed body or extremities",
"score": "2"
}
]
},
{
"desc": "Pulse",
"options": [
{
"answer": "Absent",
"score": "0"
},
{
"answer": "< 100",
"score": "1"
},
{
"answer": "> 100",
"score": "2"
}
]
},
{
"desc": "Grimace",
"options": [
{
"answer": "No response to stimulation",
"score": "0"
},
{
"answer": "Grimace on suction or aggressive stimulation",
"score": "1"
},
{
"answer": "Cry on stimulation",
"score": "2"
}
]
},
{
"desc": "Activity",
"options": [
{
"answer": "Absent",
"score": "0"
},
{
"answer": "Some flexion",
"score": "1"
},
{
"answer": "Flexed arms and legs resist extension",
"score": "2"
}
]
},
{
"desc": "Respiratory effort",
"options": [
{
"answer": "Absent",
"score": "0"
},
{
"answer": "Weak, irregular, gasping",
"score": "1"
},
{
"answer": "Strong, lusty cry",
"score": "2"
}
]
}
],
"desc": "Scoring tool for neonates.",
"name": "APGAR Score"
}
ng-repeat并没有真正内置任何东西来处理此问题,当您希望总数显示时,您实际上不在ng-repeat构造之外。 通常,您只需将HTML中的表达式绑定到控制器中的函数调用即可。 就像是:
<p>Total: the sum of all the option.score's {{total)()}}</p>
(其中$ ctrl是您的控制器)。
然后,在您的控制器中,您将使用类似以下内容的功能映射到它:
$ scope.total = function(){var total = 0 angular.forEach($ scope.criteria.options,function(criteria){total + = criteria.score} return total};
如果您使用controllerAs语法,则完全不同。
尝试这样的事情:
var app = angular.module("Demo", []); app.controller("AppController", function($scope) { $scope.total = 0; $scope.selectValue = []; $scope.SumValue = function() { $scope.total = 0 for (var i = 0; i < $scope.selectValue.length; i++) { if ($scope.selectValue[i] != undefined) $scope.total += parseInt($scope.selectValue[i]); } } $scope.data = { "criterias": [{ "desc": "Complexion", "options": [{ "answer": "Blue or Pale all over", "score": "0" }, { "answer": "Blue at extremities", "score": "1" }, { "answer": "No cyanosed body or extremities", "score": "2" }] }, { "desc": "Pulse", "options": [{ "answer": "Absent", "score": "0" }, { "answer": "< 100", "score": "1" }, { "answer": "> 100", "score": "2" }] }, { "desc": "Grimace", "options": [{ "answer": "No response to stimulation", "score": "0" }, { "answer": "Grimace on suction or aggressive stimulation", "score": "1" }, { "answer": "Cry on stimulation", "score": "2" }] }, { "desc": "Activity", "options": [{ "answer": "Absent", "score": "0" }, { "answer": "Some flexion", "score": "1" }, { "answer": "Flexed arms and legs resist extension", "score": "2" }] }, { "desc": "Respiratory effort", "options": [{ "answer": "Absent", "score": "0" }, { "answer": "Weak, irregular, gasping", "score": "1" }, { "answer": "Strong, lusty cry", "score": "2" }] }], "desc": "Scoring tool for neonates.", "name": "APGAR Score" } });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="Demo"> <div ng-controller="AppController"> <div ng-repeat="criteria in data.criterias"> <label> {{ criteria.desc }} </label> <br/> <select ng-model="selectValue[$index]" ng-change="SumValue()"> <option ng-repeat="option in criteria.options" value="{{option.score}}">{{option.answer}}</option> </select> </div> <p>Total: the sum of all the option.score's {{ total }}</p> </div> </div>
JSFiddle: https ://jsfiddle.net/d42jeuvs/15/
希望这就是您想要的。 谢谢。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.