点击按钮获取ng-repeat生成的表头输入值并转为指定数组格式

看起来你卡在了如何把分散的控件值和对应的表头字段关联起来，核心问题是你之前的代码是逐个遍历所有输入/选择控件，没有把同一表头下的控件归为一组。下面给你两种解决方案，一种是基于你当前的jQuery写法，另一种是更符合AngularJS思想的双向绑定写法。

方法一：基于jQuery的DOM操作方案 #

修改你的点击事件处理函数，按每个表头的过滤容器（.actual-filter）分组处理，这样就能把每个表头的col值和对应的过滤值关联起来：

// 假设这是你的按钮点击事件处理函数
function getFilterValues() {
  const filterResults = [];

  // 遍历每个表头的过滤容器，每个容器对应一个表头的过滤控件
  $('#filterTable').find('.actual-filter').each(function() {
    const $container = $(this);
    // 获取当前表头对应的col值（从隐藏输入框中）
    const col = $container.find('.header_col').val();
    
    if (!col) return; // 跳过没有col值的无效项

    // 判断当前表头的过滤类型：先检查是否是文本类型的select控件
    const $select = $container.find('select[name="filter_select"]');
    if ($select.length > 0) {
      // 处理多选select：如果用了select2，获取选中的文本/值；如果没用直接用val()
      const selectedValues = $select.select2 ? 
        $select.select2('data').map(item => item.text) : // 如果你需要的是显示文本
        ($select.val() || []); // 如果需要的是option的value值，直接用val()
      
      filterResults.push({
        col: col,
        filter_select: selectedValues
      });
    } else {
      // 处理数值范围类型的输入框
      const fromVal = $container.find('.froms').val().trim();
      const toVal = $container.find('.to').val().trim();

      // 验证输入格式是否符合要求（可选，但建议加上）
      const numPattern = /^[0-9]{1,14}\.[0-9]{2}$/;
      const isValidFrom = numPattern.test(fromVal) || fromVal === '';
      const isValidTo = numPattern.test(toVal) || toVal === '';

      if (isValidFrom && isValidTo) {
        filterResults.push({
          col: col,
          filter_numeric: {
            from: fromVal ? parseFloat(fromVal) : null,
            to: toVal ? parseFloat(toVal) : null
          }
        });
      } else {
        // 显示错误提示
        $container.find('.filter-numeric-error').show().text('请输入正确的数值格式（最多14位整数，2位小数）');
      }
    }
  });

  console.log('最终过滤结果:', filterResults);
  // 这里可以将filterResults用于后续的接口请求等操作
}

关键说明： #

• 按容器分组：每个.actual-filter对应一个表头的过滤控件，这样能确保col值和过滤值一一对应，不会混乱。
• select2处理：如果你用了select2插件，需要用select2('data')来获取选中的完整对象数组，再提取你需要的text或id；如果没用select2，直接用$select.val()就能得到多选的value数组。
• 数值验证：加上格式验证可以避免无效数据被提交，提升用户体验。

方法二：AngularJS双向绑定方案（更推荐） #

既然你用的是AngularJS，完全可以利用双向绑定来避免直接操作DOM，代码更简洁也更易维护：

1. 修改HTML，绑定控件值到scope对象 #

在你的ng-repeat模板中，把输入控件的值绑定到对应的header对象属性上：

<!-- 文本类型的select -->
<select class="form-control select2 filter_{{ index }}" name="filter_select" multiple="multiple" 
        ng-model="header.selectedValues">
</select>

<!-- 数值类型的输入框 -->
<input type="text" class="form-control froms" ng-model="header.filterFrom" 
       onclick="event.stopPropagation();" placeholder="From" pattern="[0-9]{1,14}\.[0-9]{2}"/>
<input type="text" class="form-control to" ng-model="header.filterTo" 
       onclick="event.stopPropagation();" placeholder="To" pattern="[0-9]{1,14}\.[0-9]{2}"/>
<!-- 错误提示 -->
<div style="display: none;" class="filter-numeric-error" ng-show="header.numericError">{{header.numericError}}</div>

2. 在controller中编写获取值的函数 #

直接从$scope.filterTbl.gatVisibleFilterHeaders中提取数据，不需要操作DOM：

$scope.getFilterValues = function() {
  const filterResults = $scope.filterTbl.gatVisibleFilterHeaders
    // 只处理可见的表头
    .filter(header => header.is_visible)
    .map(header => {
      if (header.filter_type === 'text' || header.filter_type === '') {
        return {
          col: header.col,
          filter_select: header.selectedValues || []
        };
      } else if (header.filter_type === 'numeric') {
        // 验证数值格式
        const numPattern = /^[0-9]{1,14}\.[0-9]{2}$/;
        const isValidFrom = numPattern.test(header.filterFrom) || !header.filterFrom;
        const isValidTo = numPattern.test(header.filterTo) || !header.filterTo;

        if (!isValidFrom || !isValidTo) {
          header.numericError = '请输入正确的数值格式（最多14位整数，2位小数）';
          return null;
        }
        // 清除之前的错误提示
        delete header.numericError;

        return {
          col: header.col,
          filter_numeric: {
            from: header.filterFrom ? parseFloat(header.filterFrom) : null,
            to: header.filterTo ? parseFloat(header.filterTo) : null
          }
        };
      }
      return null;
    })
    // 去掉无效的项
    .filter(item => item !== null);

  console.log('最终过滤结果:', filterResults);
  // 后续逻辑：比如调用接口提交过滤条件
};

关键说明： #

• 双向绑定：控件的值会自动同步到header对象中，不需要手动从DOM取值，这是AngularJS的核心优势。
• 更易维护：所有数据都在scope中管理，不需要依赖DOM结构，后续修改模板也不容易出错。

两种方案都能解决你的问题，推荐优先使用AngularJS的双向绑定方案，更符合框架的设计思想。

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