AngularJS 1.x下拉选项添加额外值与选中取值及jQuery代码转译

咱们先把你用jQuery实现的功能，转换成AngularJS 1.x的风格——毕竟AngularJS是数据驱动的，咱们尽量避免直接操作DOM，而是通过绑定数据来实现需求。

1. 核心思路：用ng-options绑定数据源 #

在AngularJS里，我们不会手动写<option>标签，而是把选项数据放在控制器里，用ng-options渲染下拉框，同时用ng-model绑定选中的项。这样选中时直接就能拿到完整的选项对象，包括额外属性，根本不用去DOM里读data-foo。

2. 完整代码实现 #

HTML部分 #

<div ng-app="myApp" ng-controller="SelectController">
  <select ng-model="selectedItem" ng-options="item.text for item in selectOptions">
    <!-- 可选：添加默认提示选项 -->
    <option value="">请选择</option>
  </select>
  
  <!-- 实时展示选中结果，方便测试 -->
  <p>选中的value：{{ selectedItem?.value }}</p>
  <p>选中的额外值foo：{{ selectedItem?.foo }}</p>
</div>

AngularJS 控制器部分 #

angular.module('myApp', [])
.controller('SelectController', function($scope) {
  // 定义下拉框的数据源，每个对象包含value、显示文本text，以及额外属性foo
  $scope.selectOptions = [
    { value: 1, text: 'this', foo: 'dogs' },
    { value: 2, text: 'that', foo: 'cats' },
    { value: 3, text: 'other', foo: 'gerbils' }
  ];
  
  // 监听选中项变化（可选，用于执行自定义业务逻辑）
  $scope.$watch('selectedItem', function(newSelectedItem) {
    if (newSelectedItem) {
      console.log('选中的value:', newSelectedItem.value);
      console.log('额外值foo:', newSelectedItem.foo);
      // 在这里编写你需要的业务逻辑
    }
  });
});

3. 关键细节说明 #

• 添加额外值：直接在数据源的每个对象里添加你需要的属性（比如foo）就行，不用像jQuery那样加data-*属性，数据和视图是自动绑定的。
• 获取额外值：因为ng-model="selectedItem"绑定的是整个选项对象，所以直接通过selectedItem.foo就能拿到额外值，不需要去DOM里查找元素。
• 如果需要保留原生value属性（比如表单提交场景），可以修改ng-options的写法：

  <select ng-model="selectedValue" ng-options="item.value as item.text for item in selectOptions">
  </select>
  

  这种情况下ng-model绑定的是选中的value，需要通过数据源匹配获取额外值：

  $scope.$watch('selectedValue', function(newVal) {
    if (newVal) {
      const selectedObj = $scope.selectOptions.find(item => item.value === newVal);
      console.log('额外值foo:', selectedObj.foo);
    }
  });
  

4. 对比jQuery实现的优势 #

原来的jQuery是通过操作DOM来获取数据，而AngularJS的方式是数据优先：

• 不用手动监听change事件，ng-model和$watch会自动处理变化
• 不用查找DOM元素、读取data-*属性，直接从绑定的对象里取数据
• 代码更清晰，数据和视图分离，维护性更强

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