在angualrjs中动态地重复文本框中的和值

时间:2017-06-21 12:31:16

标签: javascript angularjs angularjs-ng-repeat

大家好我正在使用angular js我正在尝试总结将值放在基于ng-repeat文本框的行中我尝试了它总和整个数据,任何人都可以帮助如何解决问题

这里我附上了我的小提琴:https://jsfiddle.net/rjj/zm9941tm/1/

4 个答案:

答案 0 :(得分:2)

<td><input type="text" ng-model="x.result = +x.value1 + +x.value2;"></td>

这可以解决问题。将结果设置为value1和value2之和,并添加+以将字符串更改为数字以便于求和。小提琴:https://jsfiddle.net/zm9941tm/4/

答案 1 :(得分:0)

你可以使用

ng-model="x.result = x.value1 + x.value2"

检查这个小提琴

https://jsfiddle.net/kL315y2h/1/

答案 2 :(得分:0)

假设你在ng-repeat中使用的数组是“myArray”,你可以在控制器中添加一个函数,如:

$scope.calculateSum = function calculateSum(array) {

  var sum = 0;
  array.forEach(function (value) {
    this.sum += value;
  }, this); 

  return sum;
}

在ng-repeat表之后,添加另一个值为{{calculateSum(myArray}}

的元素

答案 3 :(得分:0)

用静态值尝试了一些事情......希望这可以帮助你

var app = angular.module('plunker', []);


app.controller('EditorController', function($scope) {
$scope.records = [
    {
      "value1" : 10,
      "value2" : 20,
			"result" :0
    },
    {
       "value1" : 30,
      "value2" : 40,
			"result" :0
    },
    {
      "value1" : 50,
      "value2" : 60,
			"result" :0
    },
    {
      "value1" : 70,
      "value2" : 80,
			"result" :0
    }
  ]
  $scope.func=function(x){
    return x.value1+x.value2;
  }
});
<!doctype html>
<html ng-app="plunker" >
<head>
 
  
  <link rel="stylesheet" href="style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.js"></script>
  <script src="script.js"></script>
</head>
<body>
  <div ng-controller="EditorController">
      <table  border="1">

<tr>
	<th>A</th>
	<th>B</th>
	<th>Result</th>
</tr>
<tr ng-repeat="x in records">
  <td><input type="text" ng-model="x.value1"></td>
    <td><input type="text" ng-model="x.value2"></td>
		  <td><input type="text"  ng-init="result = func(x);" ng-model="result"></td>
			 
</tr>
</table>
  </div>
</body>
</html>