AngularJS: динамические имена ng-моделей в ng-повторном и отображаемом поле ввода сумма

Question

У меня есть некоторые простые данные, из которых мне бы хотелось создать динамические имена ng-model. Я знаю, что если у вас есть эти имена удобны вы сцепить свои входные значения вместе и отображать их, например, так:

<p>{{blah--bleh}}</p> 

Но что, если я не знаю, эти имена нг-модели заранее, или сколько там будет быть? Как я могу динамически создавать эти имена, а затем, как бы многие из них не отображались, отображают сумму своих значений, которые вводит пользователь?

Если его непонятно, что я прошу, here is a fiddle. Думаю, ты увидишь, для чего я собираюсь.

HTML-

<div ng-controller="MainCtrl"> 
    <ul> 
     <li ng-repeat="invoice in invoices"> 

      <input type="number" step="any" placeholder="Enter Amount" 
        ng-model="invoice.salesOrder" /> 
     </li> 
    </ul> 

    <div class="sum"> Total Amount: ${{blah--blah}} 
       </div><!-- READ ONLY --> 

</div> 

JS

var app = angular.module('angularjs-starter', []) 

.controller("MainCtrl", 
      function($scope) { 

    $scope.invoices = [ 
     { 
      "salesOrder": "5"  
     }, 
     { 
      "salesOrder": "6"   
     }, 
     { 
      "salesOrder": "7" 
     } 
    ]; 


}); 

Answer 1

Сделать функцию следующим образом: http://jsfiddle.net/d5ug98ke/2/ Это будет рассчитать общее и обновить связанную переменную в любое время изменения входной

<div ng-controller="MainCtrl"> 
    <ul> 
     <li ng-repeat="invoice in invoices">    
      <input type="number" step="any" placeholder="Enter Amount" 
        ng-model="invoice.salesOrder" ng-change="getSalesTotal()" /> 
     </li> 
    </ul> 

    <div class="sum"> Total Amount: ${{sum}} 
       </div><!-- READ ONLY --> 
</div> 

var app = angular.module('angularjs-starter', []) 

.controller("MainCtrl", 
      function($scope) { 
    $scope.sum = 0; 
    $scope.invoices = [ 
     { 
      "salesOrder": "5"  
     }, 
     { 
      "salesOrder": "6"   
     }, 
     { 
      "salesOrder": "7" 
     } 
    ]; 

    $scope.getSalesTotal = function(){ 
     $scope.sum = 0; 
     $scope.invoices.forEach(function(invoice){ 
      $scope.sum += parseInt(invoice.salesOrder, 10); 
     }); 
    }; 
});