Question

我正在使用AngularJS。有两个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'指令不起作用？ “成员选择”始终显示“无成员”。

Answer 1

我尝试了几种方法，看起来像这样。

＆＃13;

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;
      }
    }
  }
])

＆＃13;

<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>

＆＃13;

Answer 2

根据文件 - ＆gt; 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>

Answer 3

它不起作用，因为ngOptions与ngReapeat类似，只有在select_team.members数组中有值时它才会迭代。在Team3中，成员数组为空，因此将跳过所有内部<option></option>。

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

3 个答案: