AngularJS 数量单价小计自动计算+数据列表动态添加

HTML

 <div ng-app="productlist" ng-controller="ctron1" ng-init="gt">
                                                                <div ng-repeat="x in gt ">                                                                  
                                                                    <div style="border: 1px dashed #ccc; margin-bottom: 10px; " class='{{x.fh?"fhbackcolor":""}}' id="div_p_{{x.F_GUID}}">                                                                        
                                                                        <blockquote style="margin-top: 5px; margin-bottom: 5px;">
                                                                            <div>
                                                                                <span><b>{{x.F_PAbbreviation}}</b></span>

                                                                                <span  ng-show="x.fh" class="label label-important text-center" style="margin-left:20px; ">[返货]</span>

                                                                                <span class="pull-right" style="margin-right: 20px"><a href="#delmodal" data-toggle="modal" class="btn mini "><i class="icon-trash"></i></a></span>
                                                                            </div>
                                                                            <ul class="nav nav-list" style="padding-left: 0px;">
                                                                                <li class="divider"></li>
                                                                            </ul>
                                                                            <div>
                                                                                <span>产品名称：{{x.F_ProductName}}</span>
                                                                                <div>
                                                                                    <span>商       标：{{x.F_BrandName}}</span>
                                                                                </div>
                                                                                <div>

                                                                                    <span>规格型号：{{x.F_Model}}</span>
                                                                                    <span style="margin-left: 25px;">包装规格：{{x.F_PackMode}}</span>
                                                                                    <span style="margin-left: 25px;">计量单位：{{x.F_Unit}}</span>
                                                                                </div>
                                                                                <ul class="nav nav-list" style="padding-left: 0px;">
                                                                                    <li class="divider"></li>
                                                                                </ul>
                                                                                <div>
                                                                                    <div class="input-prepend">
                                                                                        <span class="add-on" style="height: 20px">数量</span>
                                                                                        <input type="text" onkeyup="value=value.replace(/[^d.]/g,'')" class="input-small" style="text-align: right;" ng-model="x.F_Count" ng-change="countchange(x)" />
                                                                                    </div>
                                                                                    <div class="input-prepend" style="margin-left: 20px;">
                                                                                        <span class="add-on" style="height: 20px">单价</span>
                                                                                        <input type="text" onkeyup="value=value.replace(/[^d.]/g,'')" class="input-small" style="text-align: right;" ng-model="x.F_Price" ng-change="pricechange(x)" />
                                                                                    </div>
                                                                                    <div class="input-prepend" style="margin-left: 20px;">
                                                                                        <span class="add-on" style="height: 20px">金额</span>
                                                                                        <input type="text" onkeyup="value=value.replace(/[^d.]/g,'')" class="input-small" style="text-align: right;" ng-model="x.F_SumAmount" ng-change="sumamountchange(x)" />
                                                                                        <span class="add-on" style="height: 20px">元</span>
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        </blockquote>
                                                                    </div>
                                                                </div>

                                                            </div>

　　JS

//已选择产品信息
var selectproducts = [];

var app = angular.module('productlist', []);
var scope;
app.controller('ctron1', function ($scope) {
    $scope.gt = selectproducts;
    scope = $scope;
    $scope.add = function (item) {
        $scope.gt.push(item);      
        $scope.$apply();//刷新列表
    }
    //数量变化
    $scope.countchange = function (x) {
        x.F_SumAmount = (x.F_Count * x.F_Price).toFixed(2);
        x.fh = (x.F_Price != null && x.F_Price == 0);
    }
    //单价变化
    $scope.pricechange = function (x) {
        x.F_SumAmount = (x.F_Count * x.F_Price).toFixed(2);
        x.fh = (x.F_Price != null && x.F_Price == 0);

    }
    //小计变化
    $scope.sumamountchange = function (x) {
        x.F_Price = (x.F_SumAmount / x.F_Count).toFixed(2);
        x.fh = (x.F_Price != null && x.F_Price == 0);
    }

});

动态添加产品

//选择产品完毕后
function afterselectproduct() {
    var url = "?op=afterselectproduct"
    $.post(url, $('#productsform').serialize(), function (data) {              
        if (!!data) {
            //selectproducts=selectproducts.concat(data);
            //console.log(selectproducts);
            //$('#divproducts').empty();
            //$('#divproducts').append($('#divproductsrow').render(data));
            $.each(data, function (idx, item) {
                var obj = {
                    F_ProductCode: data.F_ProductCode,
                    F_ProductName: data.F_ProductName,
                    F_PAbbreviation: data.F_PAbbreviation,
                    F_Brand: data.F_Brand,
                    F_Model: data.F_Model,
                    F_PackMode: data.F_PackMode,
                    F_Unit: data.F_Unit,                                     
                    F_Order: data.F_Order,
                    F_SendBaseTimes: data.F_SendBaseTimes,
                    F_Price: '',
                    F_Count: '',
                    F_SumAmount: '',
                    F_GUID: newGuid(),

                    fh: false
                };

                scope.add(item);

            });

        }
        $('#productmodal').modal('hide');
    }, "json");
}

function newGuid() {
    var guid = "";
    for (var i = 1; i <= 32; i++) {
        var n = Math.floor(Math.random() * 16.0).toString(16);
        guid += n;
        if ((i == 8) || (i == 12) || (i == 16) || (i == 20))
            guid += "-";
    }
    return guid;
}