Reputation: 103
Here is the form: It has two text fields and a select dropdown field
<form class="ui form" name="personalInfoForm" ng-repeat="obj in users">
<div class="field">
<div class="two fields">
<div class="field ui right icon input">
<input id="id_first_name"
placeholder="Reference Number"
name="{{ obj.name }}"
type="text"
ng-model="user.first_name" required/>
<i ng-show="personalInfoForm.first_name.$valid && personalInfoForm.first_name.$dirty"
class="tiny green checkmark icon"></i>
<i ng-show="personalInfoForm.first_name.$invalid && personalInfoForm.first_name.$dirty"
class="tiny red remove icon"></i>
</div>
<div class="field ui right icon input">
<input id="id_last_name" placeholder="Date [dd-mm-yyyy]"
name="{{ obj.date }}"
type="text" ng-model="user.date" required/>
<i ng-show="personalInfoForm.last_name.$valid && personalInfoForm.last_name.$dirty"
class="tiny green checkmark icon"></i>
<i ng-show="personalInfoForm.last_name.$invalid && personalInfoForm.last_name.$dirty"
class="tiny red remove icon"></i>
</div>
</div>
</div>
<div class="field">
<select class="ui dropdown" name="gender" ng-model="user.gender" required>
<option ng-repeat="val in obj.gender" value="{{val}}">{{val}}</option>
</select>
<i ng-show="personalInfoForm.gender.$valid && personalInfoForm.gender.$dirty"
class="tiny green checkmark icon"></i>
<i ng-show="personalInfoForm.gender.$invalid && personalInfoForm.gender.$dirty"
class="tiny red remove icon"></i>
</div>
<input ng-disabled="personalInfoForm.$invalid" ng-show="!hasFormBeenEdited" ng-click="update(user)"
value="Go to next step"
class="ui right floated blue button"
type="submit"/>
<input ng-disabled="personalInfoForm.$invalid" ng-click="maintainUsers(user)"
value="Enter another item"
class="ui right floated blue button"
type="submit"/>
</form>
And this is the data in my controller:
var forms = {
name: "first_name",
date: "date",
gender: ["debtor", "Male", "Female"]
};
$scope.users = [forms];
However, it shows all the options in the inspector, along with an extra:
<option value="? undefined:undefined ?"></option>
at the top! i can't understand what is wrong with this code!
Upvotes: 1
Views: 1933
Reputation: 175
The undefined value is appearing because initially there is nothing binded with the value in option.Also I suggest you to use ng-options instead of ng-repeat.
Here goes the code,
<select class="ui dropdown" name="gender" ng-model="user.gender" ng-options = "val as val for val in obj.gender" required>
<option value="">Choose an option</option>
</select>
The "Choose an option" is to get rid of the empty option appearing in select values.
Upvotes: 1
Reputation: 594
You can select default value for your select by this way
<select class="ui dropdown" name="gender" ng-model="user.gender"
ng-options="val as val for val in obj.gender"
required>
</select>
and in your controller, specify your default value for this select
$scope.user = {gender: forms.gender[0]};
Upvotes: 4