AngularJs: Select dropdown not showing any options while using ng-repeat

Question

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!

Sherlocked Nguyen · Accepted Answer · 2016-02-23 17:38:09Z

4

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

answered Feb 23, 2016 at 17:38

Sherlocked Nguyen

5943 silver badges8 bronze badges

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

Comments

Neha Saggam · Accepted Answer · 2016-02-23 17:50:09Z

1

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.

answered Feb 23, 2016 at 17:50

Neha Saggam

1751 silver badge9 bronze badges

Collectives™ on Stack Overflow

AngularJs: Select dropdown not showing any options while using ng-repeat

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related