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, Nov 30 '16 at 10:41

score 2 · Accepted Answer · answered Nov 30 '16 at 10:54

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

@Zabs ... please let me know in case of any query – Abhishek Srivastava Nov 30 '16 at 10:56 — Abhishek Srivastava, Nov 30 '16 at 10:56
Thanks that was very clear and concise much appreciated :) – Zabs Nov 30 '16 at 11:48 — Zabs, Nov 30 '16 at 11:48

score 1 · Answer 2 · edited May 23 '17 at 12:24

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 '17 at 12:24

Community

1
1

answered Nov 30 '16 at 10:55

Tim Smart

178
1
13

score 1 · Answer 3 · answered Nov 30 '16 at 11:03

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 '16 at 11:03

rvchauhan

89
8

Set dropdown to a particular value in AngularJS

3 Answers3