AngularJS中如何动态递增ngModel字段名称？

我来帮你搞定这个需求！其实有两种思路可以实现，一种是严格按照你想要的「给每个ng-model设置带序号的属性名」，另一种是更符合AngularJS最佳实践的方式，我都给你列出来：

方案一：动态生成带序号的ng-model属性名 #

这种方式会让每个文本框的ng-model绑定到column.product_cgst-1、column.product_cgst-2这类带序号的属性上，具体实现如下：

1. 控制器代码 #

首先在你的AngularJS控制器里，初始化columns数组并实现添加/删除产品的方法：

angular.module('yourAppName', [])
.controller('yourControllerName', function($scope) {
  // 初始化产品数组
  $scope.columns = [];

  // 添加产品按钮点击事件
  $scope.addProduct = function() {
    // 往数组里推入一个空对象，后续会动态添加带序号的属性
    $scope.columns.push({});
  };

  // 可选：删除产品的方法
  $scope.removeProduct = function(index) {
    $scope.columns.splice(index, 1);
  };
});

2. 模板代码 #

在HTML模板里，利用ng-repeat的$index（循环索引）来动态生成属性名和input的name属性：

<form ng-controller="yourControllerName">
  <!-- 循环渲染每个产品的输入框 -->
  <div ng-repeat="column in columns track by $index" style="margin-bottom: 10px;">
    <div class="form-group">
      <input 
        type="text" 
        name="product_name-{{$index + 1}}" 
        ng-model="column.product_name" 
        required 
        placeholder="Product Name" 
        class="form-control"
      >
    </div>
    <div class="form-group">
      <!-- 核心：用$index+1生成从1开始的序号，绑定到动态属性上 -->
      <input 
        type="text" 
        name="product_cgst-{{$index + 1}}" 
        ng-model="column['product_cgst-' + ($index + 1)]" 
        placeholder="Product CGST" 
        class="form-control"
      >
    </div>
    <!-- 可选的删除按钮 -->
    <button type="button" ng-click="removeProduct($index)" class="btn btn-danger">删除产品</button>
  </div>

  <!-- 添加产品按钮 -->
  <button type="button" ng-click="addProduct()" class="btn btn-primary">添加产品</button>
</form>

这里的关键是用column['product_cgst-' + ($index + 1)]来动态访问对象属性，AngularJS支持这种方括号语法的动态属性绑定。

方案二：更简洁的最佳实践方式 #

其实你可能不需要修改ng-model的属性名，因为ng-repeat循环的每个column都是数组里的独立对象，它们的product_cgst属性本来就是相互独立的。这种方式代码更清晰，维护起来也更简单：

1. 控制器代码（和方案一基本一致） #

angular.module('yourAppName', [])
.controller('yourControllerName', function($scope) {
  $scope.columns = [];

  $scope.addProduct = function() {
    // 推入一个包含默认属性的对象，也可以是空对象
    $scope.columns.push({ product_name: '', product_cgst: '' });
  };

  $scope.removeProduct = function(index) {
    $scope.columns.splice(index, 1);
  };
});

2. 模板代码 #

<form ng-controller="yourControllerName">
  <div ng-repeat="column in columns track by $index" style="margin-bottom: 10px;">
    <div class="form-group">
      <input 
        type="text" 
        name="product_name-{{$index + 1}}" 
        ng-model="column.product_name" 
        required 
        placeholder="Product Name" 
        class="form-control"
      >
    </div>
    <div class="form-group">
      <!-- 直接绑定统一的product_cgst属性，每个column的这个属性都是独立的 -->
      <input 
        type="text" 
        name="product_cgst-{{$index + 1}}" 
        ng-model="column.product_cgst" 
        placeholder="Product CGST" 
        class="form-control"
      >
    </div>
    <button type="button" ng-click="removeProduct($index)" class="btn btn-danger">删除产品</button>
  </div>

  <button type="button" ng-click="addProduct()" class="btn btn-primary">添加产品</button>
</form>

这种方案下，每个产品的CGST值都会存在对应column对象的product_cgst属性里，完全不会互相干扰，而且代码更简洁易读，推荐优先使用这种方式。

内容的提问来源于stack exchange，提问作者Tanwir Alam