Having a default Item in dropdown using angularjs

Question

I have this html which works very well. My topicId displays from 0 to 7 and 0 is the first item. However nothing is displayed as the default in my dropdown when the page loads until I click the dropdown.

I will like the first item to be displayed as the default. How can I achieve this please?

        <div class="selectTopic">
            <select id="cTopic" name="cTopic" ng-model="selectedValue">
                <option ng-repeat="x in cuc.getData" value="{{x.topicId}}"> {{x.topicDescription}}</option> 
            </select>
        </div>

Try to set your model (selectedValue) to the first item in your option's ng-repeat collection. — RamblinRose
– RamblinRose, Commented May 1, 2017 at 20:46

Jaqen H'ghar · Accepted Answer · 2017-05-01 21:22:04Z

You should use ngOptions instead. Then init the model via the controller to the default value:

<select id="cTopic" name="cTopic" ng-model="selectedValue" 
    ng-options="item.topicId as item.topicDescription for item in cuc.getData">
</select>

And in controller:

$scope.selectedValue = "topicId1";

See example:

var app = angular.module('TestApp', []);

app.controller("testCtrl", function ($scope) {
	
  $scope.selectedValue = "topicId1";
  $scope.items = [
    {
      topicId : "topicId1",
      topicDescription :"topicDescription1"
    },
    {
      topicId : "topicId2",
      topicDescription : "topicDescription2"
    },
    {
      topicId : "topicId3",
      topicDescription  : "topicDescription3"
    }
  ];
  
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="TestApp" ng-controller="testCtrl">
    <div class="selectTopic">
        <select id="cTopic" name="cTopic" ng-model="selectedValue" ng-options="item.topicId as item.topicDescription for item in items">
        </select>
    </div>
</div>

Danilo Velasquez · Accepted Answer · 2017-05-01 20:49:17Z

0

You need use ng-selected: https://docs.angularjs.org/api/ng/directive/ngSelected

 <div class="selectTopic">
    <select id="cTopic" name="cTopic" ng-model="selectedValue">
        <option ng-repeat="x in cuc.getData" value="{{x.topicId}}" 
            ng-selected="selectedValue === x.topicId"> 
            {{x.topicDescription}}
        </option> 
    </select>
 </div>

However, if you are using plain html, AngularJS has more efficient ways to create dropdowns, see: https://docs.angularjs.org/api/ng/directive/ngOptions

answered May 1, 2017 at 20:49

Danilo Velasquez

5012 silver badges12 bronze badges

Comments

chukkwagon · Accepted Answer · 2017-05-01 21:07:54Z

0

The suggested answer will work too, however an alternative that I tend to use is this:

<div class="selectTopic">
<select id="cTopic" name="cTopic" ng-model="selectedValue" ng-options="x.topicId as x.topicDescription for x in cuc.getData">
    <option value="">Select One ...</option> 
</select>

Angular has to start with some value for un-initialized selects, so providing a blank option in the html safely initializes the select without making assumptions on behalf of your users.

edited May 1, 2017 at 21:07

answered May 1, 2017 at 20:57

chukkwagon

6347 silver badges12 bronze badges

4 Comments

Baba Over a year ago

Am working on an application that will be in different languages so I cant have "Select One" in code. Everything is coming from the database

chukkwagon Over a year ago

I'm not sure what you mean? the value that will be stored in the model is an empty string (if you don't select something else).

Baba Over a year ago

I tried it and no luck. All other items in the dropdown are not displaying again just the first item is displaying. Select One ..

chukkwagon Over a year ago

oh i missed some stuff in the ng-options, let me edit

Collectives™ on Stack Overflow

Having a default Item in dropdown using angularjs

3 Answers 3

Comments

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related