Fatal编程技术网
  • javascript/
  • Javascript 如何从ng repeat individual scope更改父范围-Angular JS

Javascript 如何从ng repeat individual scope更改父范围-Angular JS

javascript angularjs

Javascript 如何从ng repeat individual scope更改父范围-Angular JS,javascript,angularjs,angularjs-directive,angularjs-scope,angularjs-ng-repeat,Javascript,Angularjs,Angularjs Directive,Angularjs Scope,Angularjs Ng Repeat,我有下面的场景 我有一张n行的桌子。在每一行中，都有一个total列。对行列的所有值进行求和，并为行填充总计。最后，对所有行总计进行求和，得到授予总计 表格行是使用ng repeat生成的。这是我的逻辑，当单元格值更改时，行总数将更新。行总数的表达式为{{$parent.grant\u total=parseInt（$parent.grant\u total）+num1*num2}}，因此总和将与父范围中可用的grant total相加。但这并不像预期的那样有效，我也不知道我哪里出了问题。我正试

我有下面的场景

我有一张n行的桌子。在每一行中，都有一个
total
列。对行列的所有值进行求和，并为行填充总计。最后，对所有行总计进行求和，得到
授予总计

表格行是使用
ng repeat
生成的。这是我的逻辑，当单元格值更改时，行总数将更新。行总数的表达式为
{{$parent.grant\u total=parseInt（$parent.grant\u 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}}  />

<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>
如果这是错误的，请给我一个正确的解决方案。非常感谢您的帮助。提前感谢

您可以使用以下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>
我使用控制器作为语法，这使我能够更清楚地绑定到什么，并且让我不必使用
$scope
，这会很快变得混乱。基本上，它使用
as
关键字后面定义的变量创建我的作用域函数的实例，基本上与执行此操作相同

var myClass = function() {
    this.foo = 'Bar';
}
var fooBar = new myClass();
alert(fooBar.foo);
这样，fooBar就是myClass的一个实例，我可以在任何需要的地方调用它。它在angular中的工作方式相同，在我上面的代码中，parent是myController的一个实例，我可以在不使用
$parent
的情况下，尽可能深入地访问它。可以找到更多信息，包括如何避免使用此方法的
$parent
的详细示例

工作冲击

看看这个

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}}  />

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

var-app=angular.module（'myApp'，[]）；
app.controller（'myController'，函数（$scope，$rootScope）{
$scope.items=[1,2,3,4]；
$scope.inputs=[]；
$scope.getGrandTotal=函数（）{
$scope.grantTotal=0；
对于（变量i=0；i<$scope.inputs.length；i++）{
$scope.grantottal=$scope.grantottal+$scope.inputs[i]；
}
返回$scope.grantottal；
};
});
说明

  • $scope.inputs
    数组将存储所有动态总值
  • 因为
    $scope.items=[1,2,3,4]
    和
    ng repeat=“i in items”
    以及我将
    ng model=“inputs[i-1]”
    以这样的方式放置，以便四个文本字段模型如下所示
    • 当
      i=1
      时，
      输入[1-1]
      =>
      输入[0]
      =>这将是第一个总计文本字段模式，它将在其中存储第一个总计
    • 当
      i=2
      时，
      输入[1-2]
      =>
      输入[1]
      =>这将是第二个总计文本字段模式，它将存储第二个总计
    • 当
      i=3
      时，
      输入[1-3]
      =>
      输入[2]
      =>这将是第三个总计文本字段模式，它将存储第三个总计
    • 当
      i=4
      时，
      输入[1-4]
      =>
      输入[3]
      =>这将是第四个总计文本字段模式，它将存储第四个总计
  • $scope.getGrandTotal
    函数将迭代
    $scope.inputs
    数组并返回总计
  • ng value
    是一个角度表达式，其值将绑定到输入元素的value属性
  • ng value
    对于使用ngRepeat动态绑定生成文本字段值非常有用
感谢您的努力。但这是行不通的。我也有同样的问题。行总计正在工作，但授予总计将使用最后一行总计的值填充。您的代码段也有这个问题..parseInt在角度表达式中不起作用。你可能需要在里面做controller@mohamedrias-请你指导我，如何在控制器内部进行此操作。太棒了！谢谢。请您解释一下ng value在这里做什么，以及页面中有许多输入。所以$scope.inputs.length可能不起作用。我完全理解您的逻辑。我有另一个场景，在这个场景中，这个赠款总额将在其他地方更新。但是更新并没有反映在gran total字段中。你能提出一个解决方案吗。我已尝试$apply，但未按预期工作。将其作为单独的SO查询发布