AngularJS：ng-repeat 中的动态 ng-model 名称并显示输入字段总和答案

【问题标题】：AngularJS : dynamic ng-model names in ng-repeat and display input fields sumAngularJS：ng-repeat 中的动态 ng-model 名称并显示输入字段总和
【发布时间】：2015-05-29 23:47:38
【问题描述】：

我有一些简单的数据，我想从中创建动态的ng-model 名称。我知道，如果您有方便的这些名称，您可以将它们的输入值连接在一起并显示它们，如下所示：

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

但是，如果我事先不知道那些 ng-model 名称，或者会有多少个呢？如何动态创建这些名称，然后无论创建多少都显示用户输入的值的总和？

如果不清楚我在问什么，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>

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

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

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


});

【问题讨论】：

标签： angularjs angularjs-ng-repeat angularjs-ng-model

【解决方案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);
        });
    };   
});

【讨论】：