AngularJS：ng-repeat中的动态ng-model名称和显示输入字段之和

debugcn 发表于 Dev

davidpm4

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

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

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

如果不清楚我要问的是什么，这是一个小提琴。我想您会明白我要干什么。

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"  
        }
    ];


});

凯文·F

制作一个类似这样的函数：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);
        });
    };   
});

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。