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>

控制器：

$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

我在这里获得解决方案，只更改我的angularjs控制器。

//添加动态列

$ scope.columns = [{id：'firstField'}];

      select date_trunc(t.min_order_date, week) as cohort_week,
             count(*) as G_0,
             avg(case when datediff(t.order_date, t.min_order_date, week) = 1 then 100.0 else 0 end) as g_1,
             avg(case when datediff(t.order_date, t.min_order_date, week) = 2 then 100.0 else 0 end) as g_2
              . . .
  from (Select t.customerid, 
               date_trunc(orderProcessingTime, week) as order_date,
               min(date(date_trunc(orderProcessingTime, week))) over (partition by customerId) as cohort_week
        from UserData.Table_1 t
        group by customerId, order_date
       ) t
  order by cohort_week;

//删除动态列

$ scope.removeColumn = function（）{

$scope.addProduct = function(){
    var newItemNo = $scope.columns.length+1;
    $scope.columns.push({'id':'field'+newItemNo});

}

//在数据库中插入数据： -

$ scope.productAdd = function（）{

    var itemLast = $scope.columns.length-1;
    $scope.columns.splice(itemLast);

};

Answer 2

您可以在HTML中使用$ index来动态增加ng模型，而不是在控制器中执行。

在使用ngModel进行插值时使用$ index将不起作用。尝试类似下面的内容

column.product_cgst[$index]

如何增加Angularjs中的动态字段ngModel名称..？

2 个答案: