CODEWITHSUNDEEP
javascriptangularjs
jiexishede
jiexishede

Reputation: 2613

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

I am using AngularJS. There are two select, the first is the "team select," the second is the "member select." If the "team select" have the members, the "member select" show " select the member ." If the "team select" don't have the members, the 'member select" show "no member."

My problem is how to change the default option of the "member select".

This is my code: 

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

Why does the 'ng-show' directive not work ? The "member select" always shows "no member".

Upvotes: 0

Views: 99

Answers (3)

K Scandrett
K Scandrett

Reputation: 16540

It doesn't work because ngOptions is like ngReapeat in that it will ONLY iterate when there are values in the select_team.members array. In Team3 the member array is empty, so all the inner <option></option> are skipped.

Upvotes: 0

Icycool
Icycool

Reputation: 7179

I've tried a few ways, looks like this one works.

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>

Upvotes: 2

Navarro Ferreira
Navarro Ferreira

Reputation: 29

According to the documentation -> 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>

Upvotes: 0

Related Questions