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

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

本文关键字：范围 JS Angular 单个 ng      更新时间：2023-09-26

我有以下情况

我有一个有 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];
}])

如果这是错误的，请向我建议一个正确的解决方案。任何帮助将不胜感激。提前致谢

看看这个

工作演示

.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]"，以便四个文本字段模型如下所示
    • 当i = 1 时，input[1 - 1] => input[0] => 这将是第一个总计文本字段模态，它将在其中存储第一个总计
    • 当i = 2 时，input[1 - 2] => input[1] => 这将是第二个总计文本字段模式，它将在其中存储第二个总计
    • 当i = 3时，input[1 - 3] => input[2] => 这将是第三个总文本字段模态，它将在其中存储第三个总计
    • 当i = 4时，input[1 - 4] => input[3] => 这将是第四个总文本字段模态，它将在其中存储第四个总数
  • $scope.getGrandTotal函数将遍历$scope.inputs数组并返回总计。
  • ng-value是一个角度表达式，其值将绑定到输入元素的 value 属性。
  • ng-value对于使用 ngRepeat 绑定动态生成文本字段的值很有用
你可以

使用这个 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" />

试试这个

<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 关键字之后定义的变量创建我的 scope 函数的实例，基本上它与执行此操作相同

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

通过这种方式，fooBar是myClass的一个实例，我可以在我需要的地方调用它。 它在 angular 中的工作方式相同，在我上面的代码中，父是 myController 的一个实例，我可以根据需要尽可能深入地访问它，而无需使用$parent更多信息，包括我们如何避免使用此方法$parent的详细示例可以在这里找到

工作普伦克

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

相关文章：