Question

我需要通过点击“添加促销”来动态生成表单输入字段。表单上的按钮。完成了

此外，在更改选定下拉列表时，它会从数据库中获取价格并使用数量来计算该产品的数量。

如果我点击＆＃39;添加促销＆＃39;另一个表单的按钮生成的更改会影响前一个表单。

如何独立计算每个表单的数量并使用angularJS收集其中的数据？

这是控制器

appcat.controller("MainCtrl", ['$scope', '$http', '$location', function ($scope, $http, $location)
{
    //var quan = $scope.quantity;
    $http.get('/api/pproduct').success(function (data)
    {
        $scope.pcategoryA = data;
    });

    // this controll the addition and removal
    $scope.choices = [{ id: 'choice1' }];

    //any time changes occurr it calculate the Amount 
    $scope.changedValue = function (item,quan)
    {


        if (item != null && quan !=null)
        {

            $http.get('/api/product/'+ item).success(function (data) // this is the price for that product from the Database
            {
                //this sets amount field
                $scope.amount = parseFloat(data.price * quan);

            });

        }
    }

    // this generate a form
    $scope.addNewChoice = function ()
    {
        var newItemNo = $scope.choices.length + 1;
        $scope.choices.push({ 'id': 'choice' + newItemNo });
    };

    // this remove the form
    $scope.removeChoice = function () {
        var lastItem = $scope.choices.length - 1;
        if ($scope.choices.length > 1) {
            $scope.choices.splice(lastItem);
        }
    };


}]);

这是html

<form class="form-inline" role="form" padding-left:10em">
                    <strong class="error">{{ error }}</strong>

                    <div class="form-group">
                        <label for="name">
                            Invoice No. : 
                        </label>
                        <input type="text" class="form-control" id="name" ng-model="name" />
                    </div>
                    <br /><hr />
                    <div ng-controller="MainCtrl">
                        <fieldset data-ng-repeat="choice in choices">


                            <div class="form-group">
                                <label for="name">
                                    Quantity :
                                </label>
                                <input type="text" class="form-control" id="quantity" ng-model="quantity" />
                            </div>

                            <div class="form-group">


                                <div class="form-group">
                                    <label class="control-label"> Product : </label>
                                    <select class="form-control" id="selected_id" ng-model="selected_id" ng-options="c.Value as c.Text for c in pcategoryA"
                                            ng-change="changedValue(selected_id,quantity)">

                                        <option value="">-- Select Category --</option>
                                    </select>
                                </div>

                            </div>



                            <div class="form-group">
                                <label for="name">
                                    Amount :
                                </label>
                                <input type="text" class="form-control" id="amount" ng-model="amount"  ng-readonly="true" />       
                            </div>

                            <button class="remove" ng-show="$last" ng-click="removeChoice()">-</button>
                            <br />
                            <hr />

                        </fieldset>
                        <button type="submit" class="col-sm-offset-10 addfields" ng-click="addNewChoice()">
                            Add Sale
                        </button>
                    </div>


                </form>

感谢先进!!

Answer 1

你必须在选择数组中加上'amount'。

$scope.choices = [{ id: 'choice1', amount: 0}];

然后在控制器中：

$scope.changedValue = function (choise,item,quan)

choise.amount = parseFloat(data.price * quan);

并且在tempalte：

ng-change="changedValue(choise,selected_id,quantity)">

<input type="text" class="form-control" id="amount" ng-model="choise.amount"  ng-readonly="true" />

生成动态表单输入字段并在angularJS中收集数组中的字段数据

1 个答案: