AngularJS：验证ng-repeat表格中select选项并获取有效值

嘿，我来帮你搞定这个问题！首先看你给出的HTML代码没写完select部分，我先帮你补全合理的结构——通常我们会把每个select的ng-model绑定到一个父作用域的对象上，这样能避免ng-repeat子作用域带来的更新问题，比如这样：

<button type="button" ng-click="checkSelect()">Check</button>
<button type="button" ng-click="getvalue()">get</button>
<table>
  <tr ng-repeat="x in names">
    <td>{{ x.Name }}</td>
    <td>
      <!-- 绑定到父作用域的selectedItems对象，用x.id作为唯一标识 -->
      <select ng-model="selectedItems[x.id]" ng-options="opt.value as opt.label for opt in selectOptions">
        <option value="">-- 请选择 --</option> <!-- 默认空选项，确保未选中时值为空 -->
      </select>
    </td>
  </tr>
</table>

接下来在你的AngularJS控制器里，我们定义好需要的数据和两个核心函数：

angular.module('yourAppName', [])
.controller('yourController', function($scope) {
  // 模拟你的names数据（你可以换成自己的真实数据）
  $scope.names = [
    {id: 1, Name: "张三"},
    {id: 2, Name: "李四"},
    {id: 3, Name: "王五"}
  ];
  // 模拟下拉选项数据
  $scope.selectOptions = [
    {label: "选项A", value: "optA"},
    {label: "选项B", value: "optB"},
    {label: "选项C", value: "optC"}
  ];
  // 用来存储每个select的选中值，键是x.id，值是选中的选项值
  $scope.selectedItems = {};

  // 检查所有select是否都未选中
  $scope.checkSelect = function() {
    // 遍历所有选中值，判断是否存在非空的项
    const hasAnySelected = Object.values($scope.selectedItems).some(val => val !== undefined && val !== "");
    if (hasAnySelected) {
      alert("有选项已经被选中啦！");
    } else {
      alert("所有下拉框都没选中任何选项~");
    }
  };

  // 获取所有已选中的值
  $scope.getvalue = function() {
    const result = [];
    // 遍历原始的names数组，对应收集选中的项
    $scope.names.forEach(item => {
      const selectedVal = $scope.selectedItems[item.id];
      if (selectedVal && selectedVal !== "") {
        result.push({
          姓名: item.Name,
          选中值: selectedVal
        });
      }
    });
    // 可以打印到控制台，也可以用弹窗展示
    console.log("已选中的内容：", result);
    alert(JSON.stringify(result, null, 2));
  };
});

几个关键点要注意： #

• ng-model的绑定方式：我用了selectedItems[x.id]而不是直接绑定person的属性，因为ng-repeat会为每一行创建子作用域，绑定到父作用域的对象上能保证选中值正确同步到父作用域，不会出现“选了但值没更新”的问题。
• checkSelect的逻辑：用Object.values()拿到所有选中值，再用some()快速判断是否有非空项，比循环遍历更简洁高效。
• getvalue的返回结构：我把选中值和对应的姓名放在一起，这样你能清楚知道哪一行选了什么，当然你也可以根据需求调整返回的格式。

如果你的person对象有特定的结构（比如person[x.id].selectedValue），只需要把ng-model改成对应的路径，然后在函数里调整访问selectedItems的方式就可以啦~

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