AngularJS HTML页面：切换标签页时设置下拉框默认值

看起来你用的是AngularJS + Angular Material的组合，要实现标签页切换时给下拉框设置预设默认值，其实可以借助Angular Material标签页的md-on-select事件来触发默认值的设置，下面是具体的实现步骤：

1. 给标签页添加切换触发事件 #

首先修改你的md-tabs标签，加上md-on-select指令，用来监听标签切换动作：

<div class="col-md-9" ng-cloak ng-controller="ServiceTypeController">
  <md-content>
    <md-tabs md-dynamic-height md-border-bottom md-selected="selectedIndex" md-on-select="onTabSelected(selectedIndex)">
      <md-tab label="Details">
        <div ng-include="'././Views/Angular/Requests/details.html'"></div>
      </md-tab>
      <md-tab label="Create">
        <!-- 其他标签内容 -->
      </md-tab>
    </md-tabs>
  </md-content>
</div>

2. 在控制器中实现切换逻辑和默认值设置 #

在ServiceTypeController里，我们需要定义标签切换的回调函数，同时预设好每个标签页对应的下拉框默认值：

angular.module('yourAppName').controller('ServiceTypeController', function($scope) {
  // 示例：下拉框的选项数据
  $scope.serviceTypeOptions = [
    { id: '1', label: '基础服务' },
    { id: '2', label: '增值服务' },
    { id: '3', label: '定制服务' }
  ];

  // 预设各标签页对应的默认值（索引对应标签的顺序，第一个标签索引为0）
  $scope.tabDefaults = [
    { id: '1' }, // Details标签默认选"基础服务"
    { id: '2' }  // Create标签默认选"增值服务"
  ];

  // 初始化默认选中第一个标签，并设置对应默认值
  $scope.selectedIndex = 0;
  $scope.selectedServiceType = $scope.tabDefaults[$scope.selectedIndex];

  // 标签切换时的回调函数
  $scope.onTabSelected = function(selectedTabIndex) {
    // 根据选中的标签索引，设置对应的下拉框默认值
    $scope.selectedServiceType = $scope.tabDefaults[selectedTabIndex];
  };
});

3. 确保下拉框正确绑定数据 #

在你的details.html（或其他标签页的模板）中，下拉框要正确绑定ng-model和选项：

<md-select ng-model="selectedServiceType" placeholder="选择服务类型">
  <md-option ng-repeat="type in serviceTypeOptions" ng-value="type">
    {{ type.label }}
  </md-option>
</md-select>

注意事项 #

• 如果你的模板是通过ng-include加载的，要注意作用域继承问题：建议把selectedServiceType绑定到一个对象属性上（比如$scope.form.selectedServiceType），避免子作用域覆盖父作用域的变量。修改后控制器里的变量可以改成：

  $scope.form = {
    selectedServiceType: null
  };
  // 初始化和切换时设置
  $scope.form.selectedServiceType = $scope.tabDefaults[selectedTabIndex];
  

  下拉框绑定改成ng-model="form.selectedServiceType"即可。
• 如果需要根据标签的label而不是索引来判断默认值，可以在md-on-select里传入标签对象（把函数改成onTabSelected(tab)），然后通过tab.label来做逻辑判断。

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