Set dropdown to a particular value in AngularJS

Question

I have the following HTML code and want the select dropdown once loaded to automatically select the entry coming from the DB - in this case from the rule.id variable. How do I do this in AngularJS?

<div class="card-second-input" ng-if="rule.unfolded">
  <select ng-init="rule.actionId" class="rectangle-30" ng-class="rules-option" ng-model="selectedAction" ng-options="team.name for team in teams track by team.id">
    <option class="rules-option" value="">Select Team</option>
  </select>
</div>

P.S I am using Angular 1.x

the value you want to show as default, assign its value in model selectedAction after data is loaded from db. — Amey Kamat
– Amey Kamat, Commented Nov 30, 2016 at 10:41

Abhishek Srivastava · Accepted Answer · 2016-11-30 10:54:32Z

2

Basically setting the ng-model value to required team object can make this change.

This should be done inside controller.

Kindly have a look into following code:-

     <!DOCTYPE html>
          <html>
           <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">
           </script>
          <body>

             <div ng-app="myApp" ng-controller="myCtrl">
                <select  class="rectangle-30" ng-model="selectedAction" ng-options="team.name for team in teams track by team.id">
                 <option  value="">Select Team</option>
                </select>
           <script>
              var app = angular.module('myApp', []);
              app.controller('myCtrl', function($scope) {

                $scope.teams = [
                   {"name": "A", "id" : 1},
                   {"name": "B", "id" : 2},
                   {"name": "C", "id" : 3},
                   {"name": "D", "id" : 4}
                ];
                $scope.selectedAction = {"name": "B", "id" : 2};
              });

           </script>

          </body>
       </html>

Focus on line $scope.selectedAction = {"name": "B", "id" : 2};

answered Nov 30, 2016 at 10:54

Abhishek Srivastava

1875 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Abhishek Srivastava Over a year ago

@Zabs ... please let me know in case of any query

Zabs Over a year ago

Thanks that was very clear and concise much appreciated :)

Community · Accepted Answer · 2017-05-23 12:24:14Z

1

Take a look at this post. I think this may be the solution you are after

How to set a selected option of a dropdown list control using angular JS

edited May 23, 2017 at 12:24

CommunityBot

11 silver badge

answered Nov 30, 2016 at 10:55

Tim Smart

1781 silver badge13 bronze badges

Comments

rvchauhan · Accepted Answer · 2016-11-30 11:03:12Z

1

Use ng-option like this

ng-options="team.id as team.name for team in teams track by team.id"

And set your item Id to model like this $scope.selectedAction = ieamId from controller which get from DB.

answered Nov 30, 2016 at 11:03

rvchauhan

899 bronze badges

Collectives™ on Stack Overflow

Set dropdown to a particular value in AngularJS

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related