AngularJS：ng-repeat中的動態ng-model名稱和顯示輸入字段總和

Question

我有一些簡單的數據，我想從中創建動態ng-model名稱。我知道，如果你有這些方便您連接它們的輸入值加在一起並顯示出來，像這樣的名字：

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

但是，如果我不知道什麼事先的NG-型號名稱，或有多少會是？我如何動態創建這些名稱，然後創建多個名稱，以顯示用戶輸入的值的總和？

如果不清楚我在問什麼，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); 
     }); 
    }; 
});