Как динамически добавлять значения в Angularjs

Question

Я хочу добавить динамические значения элемента JSON в AngularJS. Ниже мой HTML тег, где я хочу, чтобы отобразить его:

<tr> 
    <th class="right"> Ending Value<span class="subVal">:</span></th> 
</tr> 
<tr> 
    <td class="right">$21,50,868.06</td> 
</tr> 

Теперь для этого конечного значения, я хочу, что она должна быть сумма retailAcctTotalBalance элементов ниже JSON:

"acconnts": [{ 
    "userName": null, 
    "retailAcctNumber": "574436368", 
    "retailAcctTotalBalance": 0.0 
}, { 
    "userName": null, 
    "retailAcctNumber": "101215858", 
    "retailAcctTotalBalance": 2118639.38 
}, { 
    "userName": null, 
    "retailAcctNumber": "101900352", 
    "retailAcctTotalBalance": 32228.68 
}, { 
    "userName": null, 
    "retailAcctNumber": "574435165", 
    "retailAcctTotalBalance": 0.0 
}] 

Answer 1

Самый простой способ идти:

в вашем HTML файл, вы можете сделать:

<td class="right">{{ sum }} </td> 

И, в вашем Contr Oller:

$scope.sum = 0; 
$scope.accounts = { /* your json data */ }; 
angular.forEach($scope.accounts, function(acc, index) { 
    $scope.sum += acc.retailAcctTotalBalance; 
}); 

Answer 2

Один подход, добавить функцию в области, которая выводит то, что вы хотите от вашей модели

$scope.total=function(){ 
    var total=0; 
    angular.forEach($scope.accounts, function(account) { 
     total += acc.retailAcctTotalBalance; 
    }); 
    return total; 
}); 

В разметке:

<td class="right">{{ total() }} </td> 

Теперь, когда обновление сделано в данные, угловые наблюдатели будут запускать цикл дайджеста, в каждый цикл дайджест он будет оценивать функцию области, найденную в разметке

Другого способа просмотра данных и обновить переменную всякий раз, когда он меняет

$scope.total=0; 
$scope.accounts={ /* data*/} 

$scopw.$watch('accounts',function(newVal,oldVal){ 
    if(newVal != undefined) 
    $scope.total = getTotal(); 
}) 

function getTotal(){ 
    var total=0; 
    angular.forEach($scope.accounts, function(account) { 
     total += acc.retailAcctTotalBalance; 
    }); 
    return total; 
}); 

в разметке:

<td class="right">{{ total }} </td>