CODEWITHSUNDEEP
angularjs
Roxx
Roxx

Reputation: 3986

Option selected in Angular 1

I have a form where I am using select list. I am trying value to be selected based on the variable data. 

$scope.auto = "6";
<div class="form-group" ng-class="{ 'has-error' : errorsex }">    
        <select id="sex" name="sex" class=" selector form-control" ng-model="formData.sex" required="required"> 
          <option value="Female"  ng-if= "auto == 6" ng-selected="selected">Female</option>
          <option value="Male" ng-if= "auto == 1" ng-selected="selected">Male</option>

        </select>
<span class="errorba" ng-show="formData.errorName">{{ formData.errorsex }}</span>
</div>

Issue with the above code is this select box is loading empty. If i change the code like this.

 <option value="Female"  ng-if= "auto == 6" selected="selected">Female</option>
 <option value="Male" ng-if= "auto == 1" selected="selected">Male</option>

it is appearing properly but when I submit the form it is not there. I don't know why.

Upvotes: 1

Views: 93

Answers (2)

zahra zamani
zahra zamani

Reputation: 1375

you have 2 way for implement this: 1. condition handle in view:

 <option value="Female"   ng-selected="auto == 6">Female</option>
 <option value="Male"  ng-selected="auto == 1">Male</option>

2.in controller :

$scope.auto == 6 ? $scope.formData.sex="Female" : $scope.auto==1 ? $scope.formData.sex="male":"";

Upvotes: 3

Tek choudhary
Tek choudhary

Reputation: 178

The option will be selected if the expression inside the ng-selected attribute returns true. Syntax is:

<option ng-selected="expression"></option>

Upvotes: -1

Related Questions