CODEWITHSUNDEEP
javascriptangularjs
Amit Sharma
Amit Sharma

Reputation: 192

ng-repeat on select box flashing options after selection

I have used ng-repeat in select box, it showing all options, once i select any option then all the options get flash, not able to understand why these happening 

<select name="medical_specialty" ng-model="medical_specialty" class="form-control" ng-if="medical_specialty">
          <option value="">All Specialties</option>
        <option ng-repeat ="medical_s in medical_specialty track by $index" value="{{medical_s.id}}">{{medical_s.name}}</option>
        </select>

Front view at first load, I am not able to understand why ? object:300 ?

enter image description here

After selection of any option all option get flash

enter image description here

Upvotes: 0

Views: 95

Answers (1)

Srijith
Srijith

Reputation: 1444

You should use ng-options for showing the options in the select rather than an ng-repeat for the <option> tag.

An example for ng-options would be

 <select ng-options="user.name for user in users track by user.id" ng-model="selectedUser"></select>

In your case, try

 <select name="medical_specialty" ng-model="medicalSpecialty" ng-options=""medical_s.name for medical_s in medical_specialty track by $index">

Read more about ng-options here 

angular.module('Demo', []).controller('DemoCtrl', function($scope) {
  $scope.users = [{
    id: 1,
    name: 'John'
  }, {
    id: 2,
    name: 'Doe'
  }];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="Demo">
  <div ng-controller="DemoCtrl">
    <select ng-options="user.name for user in users track by user.id" ng-model="selectedUser"></select>

    <div>
      Selected User: {{selectedUser}}
    </div>
  </div>
</body>

Upvotes: 1

Related Questions