ng-selected not working with select in angularjs

Question

I am new to Angularjs.I am trying to set default value for select in angularjs with static values.I am not using any ng-repeat or options.But i am not able to set default value using ng-selected.Everywhere i find solutions only for ng-options but not for static values.

Here is my html

    <select name="gender" id="gender" data-ng-model="gender" ng-
    selected=="Male">
    <option value="">Select Gender</option>
    <option value="Male">Male</option>
    <option value="Female">Female</option>
    </select>

Can anyone tell where i am doing wrong?

Venkat · Accepted Answer · 2018-05-30 06:13:11Z

2

You can set default value for ng-model in controller, try adding this in your controller

$scope.gender = 'Male';

answered May 30, 2018 at 6:13

Venkat

2652 silver badges18 bronze badges

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

2 Comments

Sachin HR Over a year ago

It works.But is it not possible with ng-selected then?

Venkat Over a year ago

ng-selected directive will be used only in <option> tag not in <select>

ooozguuur · Accepted Answer · 2018-05-30 06:22:12Z

2

You can use ng-init directive. As Sraven said , ng-selected must use <option> tag.

My Example

<select name="gender" id="gender" data-ng-model="gender" ng-init="gender='Male'">
    <option value="">Select Gender</option>
    <option value="Male">Male</option>
    <option value="Female">Female</option>
</select>

edited May 30, 2018 at 6:22

answered May 30, 2018 at 6:10

ooozguuur

3,5062 gold badges26 silver badges42 bronze badges

1 Comment

Sachin HR Over a year ago

Still not selecting

marc_s · Accepted Answer · 2019-03-02 07:01:58Z

2

According to official DOCS, ng-selected is for options not for select.

You should have the boolean as ng-selected value

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

<select ng-init="mySel = true">
  <option>Select</option>
  <option value="male" ng-selected="mySel">Male</option>
  <option value="female">Female</option>    
</select>

</body>
</html>

Please check this example using ng-model

The preferred way of doing this is using ng-model without ng-selected

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body ng-app="myApp" >


<select name="gender" id="gender" ng-model="gender" ng-controller="myCtrl">
    <option value="">Select Gender</option>
    <option  value="Male">Male</option>
    <option value="Female">Female</option>
  </select>




<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
     $scope.gender = "Male" 
});
</script>

</body>
</html>

edited Mar 2, 2019 at 7:01

marc_s

760k186 gold badges1.4k silver badges1.5k bronze badges

answered May 30, 2018 at 6:15

Sravan

18.7k3 gold badges33 silver badges54 bronze badges

4 Comments

Sravan Over a year ago

@Sachin Hr, ng-selected is for options

Sachin HR Over a year ago

I dont want checkbox.On load only i want to display

Sravan Over a year ago

@SachinHR, updated my answer, you can either take scope or ng-init

Sravan Over a year ago

@SachinHR, If we use ng-model there is no need to use ng-selected it works even without it. check my second example in my answer.

Sravya Nagumalli · Accepted Answer · 2018-05-30 06:18:47Z

1

ng-selected directive can be used only in <option> tag

Check the below code

  <select name="gender" id="gender" data-ng-model="gender" >
    <option value="">Select Gender</option>
    <option ng-selected="true" value="Male">Male</option>
    <option value="Female">Female</option>
    </select>

answered May 30, 2018 at 6:18

Sravya Nagumalli

7481 gold badge6 silver badges8 bronze badges

2 Comments

Sachin HR Over a year ago

This is the one i was looking for.Thank you very much :)

Sravan Over a year ago

If we use ng-model there is no need to use ng-selected it works even without it. check my second example in my answer.

Collectives™ on Stack Overflow

ng-selected not working with select in angularjs

4 Answers 4

2 Comments

1 Comment

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

1 Comment

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related