Confused with Angular and html dropdown menu

Question

Having a frustrating time trying to figure this out. Trying to replace 3 checkboxes with a dropdown menu.

The checkboxes work perfectly. When you update the user, it provides the data for the database correctly and when you go back to edit again, it checks the correct box based on what you selected before. This is not the case for the dropdown menu. I cannot seem to get it to work. It doesn't automatically select the saved value in the dropdown and when I select a value in the dropdown and save, it doesn't get written to the database. I used all the info from the checkbox code so I am not sure why it won't work.

I like the simplicity of DROPDOWN v2.0, but I need to add text to the role.Id like in the checkbox and dropdown v1.0 code. Is that even possible inside ng-option?

CHECKBOX

<div ng-repeat="role in ctrl.userRoleEdits">
    <div class="checkbox checkbox-inline">
        <input id="role{{role.Id}}" type="checkbox" name="role{{role.Id}}" ng-model="role.Selected" />
        <label for="role{{role.Id}}" class="short">{{role.Name}}</label>
    </div>
</div>

DROPDOWN v1.0

<select class="form-control">
    <option ng-repeat="role in ctrl.userRoleEdits" id="role{{role.Id}}" name="role{{role.Id}}" ng-model="role.Selected">{{role.Name}}</option>
</select>

DROPDOWN v2.0

<select class="form-control" ng-model="role.Selected" ng-options="role as role.Name for role in ctrl.userRoleEdits track by role.Id"></select>

In your checkbox, you are binding to an element of ctrl.userRoleEdits and setting 'Selected' to be true/false. In your select, you're binding to a different model role.selected with the entire object of ctrl.userRoleEdits — logee
– logee, Commented Jan 13, 2017 at 1:31

Chen Sturmweizen · Accepted Answer · 2017-01-13 02:31:17Z

Emmmm...

I believe the role.Selected is the role id...

if so:

For DROPDOWN v1.0 the ng-model should stay withe the tag like this:

    <select class="form-control" ng-model="role.Selected">
        <option ng-repeat="role in ctrl.userRoleEdits" value="role.Id" id="role{{role.Id}}" name="role{{role.Id}}">{{role.Name}}</option>
    </select>

2017-01-13 10:25 edited: added value="role.Id"

2017-01-13 10:27

In DROPDOWN v2.0 the ng-model needs to match one of the userRoleEdits object. Then it will show the selected.

It means if the objects in userRoleEdits are like:

{
    Id: 1,
    Name: 'role 1'
}

Then for DROPDOWN v2.0 the role.Selected should be the same structure. Both Id and Name should be the same so that the dropdown will show it as the selected.

I tried your suggestion for DROPDOWN v1.0 and it did not change anything for me. As for what you said for DROPDOWN v2.0, I am not sure I understand.

Collectives™ on Stack Overflow

Confused with Angular and html dropdown menu

1 Answer 1

2017-01-13 10:27

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2017-01-13 10:27

1 Comment

Related