如何使用 AngularJS 动态获取文本框值
How to get text box values dynamically using AngularJS
我按照以下教程在 Angular 中添加了两个值;在 AngularJS 中添加两个数字
但是现在我必须在ng-repeat中对动态文本框值求和。
我有以下代码
网页代码
......
<table>
<tr>
<th>Name</th>
<th>Days</th>
</tr>
<tr ng-repeat="si in serImp">
<td>{{si.Name}}</td>
<td><input type="number" ng-model="si.Days" /></td>
</tr>
</table>
.......
<button ng-click="sum()">Calculate</button>
.......
JS代码
.........
$scope.serImp = [];
$scope.serImp = data;
// here data is object contain multiple Name+Durations e.g.
/*data =
[0]
Name:"first"
Days: 1
[1]
Name:"second"
Days: 2
[2]
Name:"third"
Days: 3*/
$scope.sum = function () {
// sum code goes here
}
........
我的问题是:我怎样才能从 ng-model="si 中获取值/数字的总和。天">
使用 reduce 来总结所有的日子。当您使用 ng-model 修改值时,您正在操作$scope.serImp
数组。然后,您可以使用这些值来计算总和。
$scope.sum = function () {
return $scope.serImp.reduce(function(prv, cur) {
return prv.Days + cur.Days;
});
}
Reduce采用一个数组,并通过将一个函数应用于其所有元素将其减少到一个值。在我们的例子中,只是简单地将所有的日子加起来。
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce
我将创建函数,该函数将返回所有天数总计并直接绑定到html
{{totalDays()}}
法典
$scope.totalDays = function(){
var totalDays = 0;
angular.forEach( $scope.serImp, function(si){
if(si.Days && !isNaN(si.Days)){
totalDays += Number(si.Days);
}
})
}
相关文章:
- 使用 jQuery 从选择标签中抓取文本
- 使用 casperjs 抓取文本节点的最快方法
- 如何分析 XML 文件和抓取文本值
- 从 URL 中抓取文本和媒体
- 突出显示:在向下钻取之前获取事件
- 使用格式化文本获取 DIV 或跨度的动态宽度高度
- 通过搜索 td 文本获取嵌套表 ID
- 将 HTML 元素的文本获取到数组中
- 如何从响应文本获取 JSON 字符串到 JavaScript 中
- 试图从X射线抓取中获取信息
- 如何根据选项文本获取选项索引
- 如何从URL中抓取文本并放置在JS数组中
- JS从文本框中抓取文本,传递给asp.net mvc ActionResult,但ActionResult参数显示为nu
- 通过其文本获取dom节点
- 如何在事件onclick中抓取文本
- 如何通过锚文本获取对象
- 在Javascript/JQuery中从超链接文本获取Href
- 在github和eclipse中,导入、推送、拉取和获取意味着什么
- 如何将函数中的文本获取到此通知警报中
- 如何从文本src抓取文本