在AngularJS中,如何更改选择的默认选项?

时间:2016-11-01 04:10:44

标签: javascript angularjs

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

3 个答案:

答案 0 :(得分:2)

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

&#13;
&#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;
&#13;
&#13;

答案 1 :(得分:0)

根据文件 - &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>

答案 2 :(得分:0)

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