AngularJS中下拉框onChange时如何获取同级input的值

嘿，这个需求其实很容易搞定，而且有两种常见的实现方式，我给你详细说说～

方案一：利用AngularJS数据绑定（推荐） #

既然你已经用ng-repeat渲染数据，每一行的x对象里已经包含了id，完全不需要额外的hidden input来存储！直接在下拉框的ng-change事件里把当前行的id和选中的状态值传进处理函数就好，这更符合AngularJS数据驱动的理念，避免不必要的DOM操作。

修改后的代码： #

<tr ng-repeat="x in record">
  <td>{{x.company }}</td>
  <td>{{x.contact}}</td>
  <td>
    <!-- 用ng-model绑定当前行的状态，方便后续回显和操作 -->
    <select name='status' ng-model="x.status" ng-change="updateRecordStatus(x.id, x.status)">
      <option value='1'>Active</option>
      <option value='0'>Inactive</option>
    </select>
  </td>
</tr>

控制器中的处理函数： #

angular.module('yourAppName', [])
.controller('YourController', function($scope) {
  // 假设这是你的数据源
  $scope.record = [
    {id: 1, company: "Tech Corp", contact: "Alice", status: 1},
    {id: 2, company: "Design Studio", contact: "Bob", status: 0}
  ];

  $scope.updateRecordStatus = function(recordId, newStatus) {
    // 在这里处理你的业务逻辑，比如调用API更新状态
    console.log(`准备更新ID为${recordId}的记录，新状态：${newStatus === '1' ? 'Active' : 'Inactive'}`);
    // 示例：如果需要提交到后端，可以写类似 $http.post('/api/update-status', {id: recordId, status: newStatus})
  };
});

方案二：通过DOM操作获取同级hidden input的值 #

如果你因为某些原因必须保留hidden input，也可以通过$event参数获取触发事件的下拉框元素，再找到它的同级hidden input：

修改后的代码： #

<tr ng-repeat="x in record">
  <td>{{x.company }}</td>
  <td>{{x.contact}}</td>
  <td>
    <input type='hidden' value="{{x.id}}" class="record-id">
    <select name='status' ng-change="handleStatusChange($event)">
      <option value='1'>Active</option>
      <option value='0'>Inactive</option>
    </select>
  </td>
</tr>

控制器中的处理函数： #

$scope.handleStatusChange = function(event) {
  // 用Angular内置的jqLite找到同级的hidden input
  const hiddenInput = angular.element(event.target).siblings('.record-id');
  const recordId = hiddenInput.val();
  const selectedStatus = event.target.value;

  console.log(`记录ID：${recordId}，选中的状态：${selectedStatus}`);
  // 这里写你的业务逻辑
};

总结 #

优先推荐方案一，因为它完全基于AngularJS的数据绑定机制，代码更简洁、可维护性更高，也避免了直接操作DOM带来的潜在问题。

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