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

Question

我有以下场景

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

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

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

你可以使用这个 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 2

试试这个

<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);
    }
}])

我正在使用 controller 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

Answer 3

看看这个

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>

脚本

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]" 放在这样的方式中，这样四个文本字段模型将如下所示
- when i = 1, input[1 - 1] => input[0] => 这将是第一个总计文本字段模式，它将存储第一个总计
- when i = 2, input[1 - 2] => input[1] => 这将是第二个总计文本字段模式，它将存储第二个总计
- when i = 3, input[1 - 3] => input[2] => 这将是第三个总文本字段模式，它将存储第三个总计
- when i = 4, input[1 - 4] => input[3] => 这将是第 4 个总文本字段模式，它将存储第四个总
$scope.getGrandTotal 函数将遍历 $scope.inputs 数组和 return 总和。
ng-value是一个angular表达式，其值将绑定到输入元素的value属性。
ng-value 对于使用 ngRepeat

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

How to change the parent scope from ng-repeat individual scope - Angular JS

javascript

angularjs

angularjs-directive

angularjs-scope

angularjs-ng-repeat