angularjs - 如何在 Angularjs 中增加动态字段 ngModel 名称？

Question

在这里，当我单击“添加产品”按钮时，它会创建一个文本字段。但我想为 ng-model="column.product_cgst" 中的每个文本框创建不同的名称。例如column.product_cgst-1、column.product_cgst-2。

<form>
    <div ng-repeat="column in columns" style="margin-bottom: 10px;">
        <div class="form-group">
            <input type="text" name="product_name" ng-model="column.product_name" required placeholder="Product Name" class="form-control"
                id="userName">
        </div>
        <div class="form-group">
            <select name="units" ng-model="column.units" class="form-control">
                <option value="">Select Units</option>
                <option ng-repeat="units in allunits" value="{{units.unit_id}}">
                    {{units.unit_name}}
                </option>
            </select>
        </div>
        <div class="form-group">
            <input id="cgst" type="text" ng-model="column.product_cgst" placeholder="Enter CGST" required class="form-control">
        </div>
        <div class="form-group">

            <input id="sgst" type="text" ng-model="column.product_sgst" placeholder="Enter SGST" required class="form-control">
        </div>
        <div class="form-group">
            <input id="igst" type="text" ng-model="column.product_igst" placeholder="Enter IGST" required class="form-control">
        </div>

        <button class="remove btn-sm btn-danger" ng-click="removeColumn($index)">x</button>
    </div>

    <div class="form-group text-right m-b-0">
        <button class="btn btn-primary waves-effect waves-light" type="submit">
            Submit
        </button>
        <button class="addfields btn btn-info waves-effect waves-light" ng-click="addProduct()">Add Product</button>
    </div>
</form>

Controller :

$scope.columns = [];
$scope.addProduct = function () {
    var newItemNo = $scope.columns.length + 1;
    $scope.columns.push({ 'colId': 'col' + newItemNo });
};

$scope.removeColumn = function (index) {
    $scope.columns.splice(index, 1);
    if ($scope.columns.length() === 0 || $scope.columns.length() == null) {
        alert('no rec');
        $scope.columns.push = [{ "colId": "col1" }];
    }
};

Answer 1

您可以在 HTML 中使用 $index 来动态增加您的 ng-model，而不是在 Controller 中执行。

在 ngModel 插值中使用 $index 将不起作用。尝试如下所示

column.product_cgst[$index]