生成動態表單輸入字段並在angularJS的數組中收集字段數據

Question

我需要通過單擊表單上的“添加銷售”按鈕來動態生成表單輸入字段。 完成了

同樣，在選定的更改下拉菜單中，它從數據庫中獲取價格，並使用數量來計算該產品的數量。

如果我點擊“添加銷售”按鈕以生成另一種形式，則更改會影響前一種形式。

如何獨立計算每種形式的金額並使用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

您必須在選擇數組中放入“金額”。

$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" />