在AngularJS中，如何更改select的默认选项

In AngularJS, how to change the default option of a select?

本文关键字：select 默认 选项 何更改 AngularJS      更新时间：2023-09-26

我正在使用AngularJS。有两个select，第一个是"团队选择"，第二个是"成员选择"。如果"团队选择"有成员，"成员选择"显示"选择成员"，如果"团队选择"没有成员，"成员选择"显示"没有成员"。

我的问题是如何改变"member select"的默认选项。

这是我的代码:

<script src="angular.js"></script>
<div class="bigDiv">
    <select class="common_select" name="xxx" ng-options="item as item.teamname for item in team_array" ng-model="select_team" id=""  ng-change="selectMemberFun(select_team)">
        <option value="" disabled selected hidden>select a team</option>
    </select>
    <select class="common_select" name="xxxxx" id="" ng-options="item as item.name for item in  select_team.members" ng-model="select_member">
        <option ng-show="!have_member" value="" disabled selected hidden>no member</option>
        <option ng-show="have_member" value="" disabled selected hidden>select a member</option>'
    </select>
</div>
<script src="angular.js"></script>
    <script>
      angular.module('app',[]).controller('xxx',['$scope', function ($scope) {
          $scope.have_member = false;
          $scope.team_array = [
              {teamname: "team1", members:[ {name:'team1member1'}, {name:'team1member2'}]},
              {teamname: "team2", members:[ {name:'team2member1'}, {name:'team2member2'}]},
              {teamname: "team3", members:[]},
          ];
          $scope.selectMemberFun = function (team) {
              if(team.members.length == 0){
                  $scope.have_member = false;
              } else {
                  $scope.have_member = true;
              }
          }
      }])
</script>

为什么'ng-show'指令不工作?"member select"总是显示"no member"

我已经尝试了几种方法，看起来这个是有效的。

angular.module('app', []).controller('TestController', ['$scope',
  function($scope) {
    $scope.have_member = false;
    
    $scope.team_array = [{
      teamname: "team1",
      members: [{ name: 'team1member1' }, { name: 'team1member2' }]
    }, {
      teamname: "team2",
      members: [{ name: 'team2member1' }, { name: 'team2member2' }]
    }, {
      teamname: "team3",
      members: []
    }, ];
                         
    $scope.selectMemberFun = function(team) {
      if (team.members.length == 0) {
        $scope.have_member = false;
      } else {
        $scope.have_member = true;
      }
    }
  }
])
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<div class="bigDiv" ng-app="app" ng-controller="TestController">
  
  <select class="common_select" name="xxx" ng-options="item as item.teamname for item in team_array" ng-model="select_team" id="" ng-change="selectMemberFun(select_team)">
    <option value="" disabled selected hidden>select a team</option>
  </select>
  
  <select class="common_select" name="xxxxx" id="" ng-options="item as item.name for item in  select_team.members" ng-model="select_member">
    <option value="" disabled selected hidden>{{have_member ? 'select a member' : 'no member'}}</option>
  </select>
</div>

根据文档-> https://docs.angularjs.org/api/ng/directive/select

<select name="singleSelect" id="singleSelect" ng-model="data.singleSelect">
      <option value="">---Please select---</option> <!-- not selected / blank option -->
      <option value="{{data.option1}}">Option 1</option> <!-- interpolation -->
      <option value="option-2">Option 2</option>
 </select>

它不起作用，因为ngOptions就像ngReapeat，因为它只会在select_team.members数组中有值时迭代。在Team3中，成员数组是空的，所以所有的内部<option></option>都被跳过。

相关文章：