AngularJS动态生成Select框：同步值到文本框及获取选中项

嘿，我帮你梳理了下遇到的两个问题，咱们一步步来解决：

第一个问题：选中项的值无法显示在文本框 #

你原来的代码里，$scope.items数组每次新增时push的是数字（比如0、1这类索引值），但动态添加的每一项应该是一个对象——数字类型没有name、value这些属性，导致ng-model绑定完全失效，所以选完下拉框后文本框根本接不到值。

解决办法：把add方法里的push逻辑改成添加空对象，给每个项留好存储属性的空间：

$scope.add = function () {
  if ($scope.items.length < 4) {
    // 替换原来的数字，push空对象
    $scope.items.push({});
  }
}

同时调整HTML里的绑定逻辑：让下拉框绑定到当前项的selectedTax属性（存储完整的税务对象），文本框直接绑定到这个对象的value属性，这样选中下拉选项后，文本框会自动同步值：

<!-- 下拉框绑定到当前项的selectedTax -->
<select name="tax_{{$index}}" ng-model="item.selectedTax" ng-options="e as e.name for e in taxes" class="form-control" ng-required>
</select>
<!-- 文本框绑定到选中对象的value，自动同步 -->
<input type="text" name="taxValue_{{$index}}" ng-model="item.selectedTax.value" class="form-control" ng-required="true" readonly/>

第二个问题：在addProduct中访问所有已添加项 #

只要$scope.items变成正确的对象数组，你可以直接在addProduct方法里通过$scope.items获取所有已添加的项——每个项里的selectedTax属性就是你选中的税务数据（包含id、name、value）：

$scope.addProduct = function () {
  // 直接打印所有已添加项
  console.log('所有已添加的税务项:', $scope.items);
  
  // 如果需要整理成提交用的数据，比如：
  const submitData = $scope.items.map(item => ({
    taxId: item.selectedTax.id,
    taxName: item.selectedTax.name,
    taxValue: item.selectedTax.value
  }));
  console.log('整理后的提交数据:', submitData);
  // 这里可以继续写提交到后端的逻辑
}

修改后的完整代码 #

控制器代码 #

var myApp = angular.module('myApp', []);
myApp.controller('productController', function ($scope, $http) {
 $scope.taxes = [
 {id: 43, name: "tex1", value: 2},
 {id: 46, name: "tex2", value: 5},
 {id: 47, name: "tex3", value: 4},
 ];
 $scope.items = [];
 $scope.newitem = '';
 
 $scope.addProduct = function () {
   console.log('所有已添加的税务项:', $scope.items);
   // 这里可以添加数据处理或提交逻辑
 }
 
 $scope.add = function () {
   if ($scope.items.length < 4) {
     $scope.items.push({});
   }
 }
 
 $scope.del = function (i) {
   console.log(i);
   $scope.items.splice(i, 1);
 }
})

HTML代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.9/angular.min.js"></script>
<div ng-app="myApp" ng-controller="productController">
 <form class="from-control" name="addProductForm">
 <input type="button" class="btn btn-info" id="addTax" ng-click="add()" value="Add Tax">
 <!-- 加上track by $index避免删除项后的重复key问题 -->
 <div ng-repeat='item in items track by $index' style="margin-top:10px;margin-bottom:10px;">
 <div class="col-lg-6 col-md-6">
 <select name="tax_{{$index}}" ng-model="item.selectedTax" ng-options="e as e.name for e in taxes" class="form-control" ng-required>
 </select>
 </div>
 <div class="col-lg-4 col-md-4">
 <input type="text" name="taxValue_{{$index}}" ng-model="item.selectedTax.value" class="form-control" ng-required="true" readonly/>
 <input type="hidden" name="taxId_{{$index}}" ng-model="item.selectedTax.id" />
 </div>
 <div class="col-lg-2 col-md-2">
 <button type="button" class="btn btn-default btn-sm" ng-click="del($index)">
 <span class="glyphicon glyphicon-minus"></span> REMOVE
 </button>
 </div>
 </div>
 <span id="sellingPriceLarge"></span>
 <button class="form-control btn btn-success" ng-disabled="addProductForm.$invalid" ng-click="addProduct()">Add Product</button>
 </form>
</div>

额外优化点：

• 给ng-repeat加上track by $index，避免删除项后AngularJS报重复key的错误；
• 文本框设置readonly防止手动修改（如果需要允许修改可以去掉）；
• 给表单元素的name加上{{$index}}，确保每个动态元素的name唯一，避免表单验证冲突。

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