生成动态表单输入字段,并在angularJS中以数组形式收集字段数据

Generate dynamic form input fields and collect field data in an array in angularJS

本文关键字:字段 数组 数据 angularJS 动态 表单 输入 并在      更新时间:2023-12-05

我需要通过点击表单上的"添加销售"按钮来动态生成表单输入字段。这就是

同样,在选择更改下拉菜单时,它会从数据库中获取价格,并使用数量来计算该产品的数量。

如果我点击另一个表单的"添加销售"按钮,则生成的更改会影响前一个表单。

如何独立计算每个表格的金额,并使用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>

提前感谢!!

您必须将"amount"放入选项数组中。

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

然后在控制器中:

$scope.changedValue = function (choise,item,quan)
choise.amount = parseFloat(data.price * quan);

暂时:

ng-change="changedValue(choise,selected_id,quantity)">
<input type="text" class="form-control" id="amount" ng-model="choise.amount"  ng-readonly="true" />