Question

我有以下情况

我有一个包含n行的表。在每一行中都有一个total列。对行列的所有值求和，并为行填充总计。最后，将所有行总计相加以获得grant total。

使用ng-repeat生成表格行。这是我的逻辑，当单元格值更改时，行总计将更新。行总计具有表达式{{ $parent.grant_total = parseInt($parent.grant_total) + num1*num2 }}，因此总和将与父作用域中可用的grant total相加。但这不符合预期，我不知道我哪里出错了。我试图做正确的，有角度的方式。找到下面的完整代码

HTML

<body ng-app="myApp" ng-controller="myController" ng-init="grant_total=0"  >
<div ng-repeat="i in items">
  <input type="text" ng-model="num1" />
  <input type="text" ng-model="num2" />
  <input type="text" value="{{ $parent.grant_total = parseInt($parent.grant_total) +(num1*num2) }}"   />
</div>
<input type="text" value={{grant_total}}  />

JS

angular.module('myApp', [])
.controller('myController', ['$scope','function($scope){
   $scope.items = [1,2,3];
}])

如果这是错误的，请建议我一个正确的解决方案。任何帮助是极大的赞赏。提前致谢

Answer 1

看看这个

<强> Working Demo

<强> HTML

<div ng-app='myApp' ng-controller="myController">
    <div ng-repeat="i in items">
        Number One:<input type="text" ng-init="num1=0" ng-model="num1" />
        <br>
        Number Two:<input type="text" ng-init="num2=0" ng-model="num2" />
        Total:<input type="text" ng-model="inputs[i-1]" ng-value="inputs[i-1] =(num1*num2);" />
        <br>
        <br>
    </div>
    <input type="text" ng-value="getGrandTotal()" />
</div>

<强> SCRIPT

var app = angular.module('myApp', []);
app.controller('myController', function ($scope, $rootScope) {
    $scope.items = [1, 2, 3, 4];
    $scope.inputs = [];

    $scope.getGrandTotal = function () {
        $scope.grantTotal = 0;
        for (var i = 0; i < $scope.inputs.length; i++) {
            $scope.grantTotal = $scope.grantTotal + $scope.inputs[i];
        }
        return $scope.grantTotal;
    };
});

<强>描述

$scope.inputs数组将存储所有动态总值
由于$scope.items = [1, 2, 3, 4];和ng-repeat="i in items"以及ng-model="inputs[i-1]"以这样的方式放置i = 1，因此四个文本字段模型将如下所示
- input[1 - 1]时，input[0] =＆gt; i = 2 =＆gt;这将是第一个总文本字段模式，它将存储第一个总数
- input[1 - 2]时，input[1] =＆gt; i = 3 =＆gt;这将是第二个总文本字段模式，它将存储第二个总数
- input[1 - 3]时，input[2] =＆gt; i = 4 =＆gt;这将是第3个总文本字段模式，它将存储第三个总数
- input[1 - 4]时，input[3] =＆gt; $scope.getGrandTotal =＆gt;这将是第4个总文本字段模式，它将存储第四个总数
$scope.inputs函数将遍历ng-value数组并返回总和。
ng-value是一个角度表达式，其值将绑定到input元素的value属性。
{{1}}对于使用ngRepeat

Answer 2

您可以使用此HTML：

<body ng-app="myApp" ng-controller="myController" ng-init="result = { grant_total: 0 }"  >
<div ng-repeat="i in items">
  <input type="text" ng-model="num1" />
  <input type="text" ng-model="num2" />
  <input type="text" value="{{ result.grant_total = parseInt(result.grant_total) + (num1 * num2) }}"   />
</div>
<input type="text" ng-model="result.grant_total" />

Answer 3

试试这个

<body ng-app="myApp" ng-controller="myController as parent" ng-init="parent.grant_total=0">
    <div>
        <input type="text" ng-model="num1"> 
        <input type="text" ng-model="num2" ng-blur="parent.setRunningTotal(num1,num2)"> 
        <input type="text" value="{{ (num1*num2) || 0 }}">
    </div><br>
    <br>

    <input type="text" value="{{parent.runningTotal}}">

</body>

和JS

angular.module('myApp', [])
  .controller('myController', ['$scope', function($scope){
    var self = this;
    this.items = [1,2,3];
    this.runningTotal = 0;
    this.setRunningTotal = function(num1,num2) {
       self.runningTotal += (num1 * num2);
    }
}])

我正在使用控制器AS语法，这使我更清楚我实际绑定到什么，并让我逃脱而不使用$scope，这可能会很快混淆。基本上它创建了我的范围函数的实例，其中as关键字之后定义的变量基本上与执行此操作相同

var myClass = function() {
    this.foo = 'Bar';
}
var fooBar = new myClass();
alert(fooBar.foo);

这样fooBar就是myClass的一个实例，我可以在任何需要的地方调用它。它在angular中的工作方式相同，在我的代码上面，parent是myController的一个实例，我可以在不使用$parent更多信息的情况下尽可能深地访问它，包括我们如何避免使用的详细示例使用此方法的$parent可以找到here

工作插件

http://plnkr.co/edit/2CMfXpfjrzfsD80WFKGX

如何从ng-repeat单个范围更改父范围 - Angular JS

3 个答案: