來自不同ng-repeat Angular js的總和值

我想在我看來，從不同ng-repeat中總結出三個值，這就是我所擁有的。來自不同ng-repeat Angular js的總和值

<tr ng-repeat="a in data1"> 
    <td>a.num1</td> 
</tr> 
<tr ng-repeat="b in data2"> 
    <td>b.num2</td> 
</tr> 
<tr ng-repeat="c in data3"> 
    <td>c.num3</td> 
</tr> 
<tr> 
    <td>(Here I want to print the sum of the three values)</td> 
</tr>

我在我的控制器中有這個。

$scope.data1 = [ 
     { 
      "num1": 1, 
     } 
    ] 
    $scope.data2 = [ 
     { 
      "num2": 2, 
     } 
    ] 

    $scope.data3 = [ 
     { 
      "num3": 3, 
     } 
    ]

的結合是好的，我從打印每納克重複來的值，但我需要總和就值並在最後

打印結果一些幫助，這將是巨大的！

來源

2016-06-21 kennechu

你能不能也請把你的'angularjs'代碼和一些示例數據？ –

嗨，我沒有小提琴，因爲我無法訪問網絡我連接到，我更新我的問題，並把我有的數據，這是一個小例子。 – kennechu

你應該真的只是在控制器的一個函數中做這件事（或者更好的是在一個服務/工廠中處理提取數據，如果它只需要在新數據被提取時發生）。當您在視圖中進行插值{{}}時，您創建了一個觀察器，並且在每個摘要中重新評估{{}}中的表達式，這會導致性能較差，因爲您繼續添加更多觀察器並且摘要由任何改變模型並且需要使視圖更新的東西 – shaunhusain

試試這個：

//在控制器端添加了此方法

$scope.getTotal = function(){ 
    var total = 0; 
    angular.forEach($scope.data1, function(data1) { 
     total += data1.num1; 
    } 
    angular.forEach($scope.data2, function(data2) { 
     total += data2.num2; 
    } 
    angular.forEach($scope.data3, function(data3) { 
     total += data3.num3; 
    } 
    return total; 
} 


<td>{{ getTotal() }}</td>//Here is the total value

來源

2016-06-21 04:57:00

檢查ng-init上的文檔它應該只用於ng-repeat的別名屬性，這個邏輯應該只在JS的某處（控制器或某個角度提供者）完成。如果你擺脫了ng-repeat並將其設置在控制器中（我們將把它轉換爲up-vote），但我認爲這不是一個好的建議。 – shaunhusain

這種邏輯不屬於視圖中......它應該在控制器中完成。這樣做是可怕的低效率 – charlietfl

對不起，我已經更新瞭解決方案。 –

在您的控制器做到這一點：

$scope.sum = $scope.data1[0].num1 + $scope.data2[0].num2 + $scope.data3[0].num3;

而且在下面TD分配的總和：

<tr><td>{{sum}}</td></tr>

來源

2016-06-21 05:02:45 ShwethaU

這是不正確的方式，你設置固定的指數，並得到總結。 –

y OU還可以使用ng-repeat-start和ng-repeat-end到外部訪問值NG-重複

這樣

<body ng-app="myApp" ng-controller="MyCtrl"> 
<h1>Hello Plunker!</h1> 

<table> 
    <tr ng-repeat-start="a in data1"> 
     <td>{{a.num1}}</td> 
    </tr> 
    <tr ng-repeat-start="b in data2"> 
     <td>{{b.num2}}</td> 
    </tr> 
    <tr ng-repeat-end> 
    <td>{{a.num1 + b.num2}} </td> 
    </tr> 
    <tr ng-repeat-end></tr> 
</table>

瞭解更多信息ng-repeat-start

來源

2016-06-21 05:10:24

這個問題可能已經回答了，但是這可能會有所幫助。它更多的是一種設計模式而不是答案。它確實涉及重寫你的一些代碼。

通過圍繞一個對象組織數據，您在動態創建/變更數據時擁有更大的靈活性。

angular.module('app',[]) 
 
.controller('bazContoller',function($scope){ 
 

 
let things = { //controller name or namespace 
 
     enums:{ //enumerable's used by the controller 
 
     data1:[ 
 
      { "num": 1 } 
 
     ], 
 
     data2:[ 
 
      { "num": 2 } 
 
     ], 
 
     data3:[ 
 
      { "num": 67 } 
 
     ] 
 
     }, 
 
    
 
     sum(){ 
 
     return Object.keys(this.enums).map(item => this.enums[item]) 
 
     .reduce((start ,item)=>start += item[0].num,0); 
 
     } 
 
    } 
 

 
    Object.assign(this ,things) ; //controller as 
 
    //$scope['bazContoller'] = things; //$scope 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app='app'> 
 
    <div ng-controller='bazContoller as baz'> 
 
    <table> 
 
     <tr ng-repeat="a in baz.enums.data1"> 
 
     <td>{{a.num}}</td> 
 
    </tr> 
 
    <tr ng-repeat="b in baz.enums.data2"> 
 
     <td>{{b.num}}</td> 
 
    </tr> 
 
    <tr ng-repeat="c in baz.enums.data3"> 
 
     <td>{{c.num}}</td> 
 
    </tr> 
 
    <tr> 
 
     <td>SUM: {{baz.sum()}}</td> 
 
    </tr> 
 
    </table> 
 
    
 
    </div> 
 
</div>

來源

2016-06-21 06:27:02 echopeak

來自不同ng-repeat Angular js的總和值

回答

相關問題