AngularJSでは、selectのデフォルトオプションをどのように変更するのですか？

Question

私はAngularJSを使用しています。 selectが2つあり、最初は「チーム選択」、2番目は「メンバー選択」です。 「チーム選択」にメンバーがある場合、「メンバー選択」は「メンバーを選択」を示します。 「チームを選択」した場合のメンバー、「メンバーを選択し、」ショー 『がないメンバーを持っていません。『を選択部材』

私の問題は、デフォルトのオプションを変更する方法である』。

これは、私のコード：

<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-ショー' ディレクティブは動作しません "メンバーを選択し、" 常に "何のメンバー" を示していない

Answer 1

私はいくつかの方法を試しましたが、このように見えます。

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>

Answer 2

ドキュメントによると - >https://docs.angularjs.org/api/ng/directive/select

？。

Answer 3

ngOptionsはselect_team.members配列の値がある場合、それが唯一反復することでngReapeatのようなものですので、それは動作しません。 Team3では、メンバ配列は空です。したがって、内部のすべてがスキップされます（​​3210）。