lordfriend / nya-bootstrap-select

An AngularJS select replacement which build select like dropdown component with collection and ng-model support
http://nya.io/nya-bootstrap-select/
MIT License
178 stars 81 forks source link

Select values instead of name #155

Open andrewfam opened 7 years ago

andrewfam commented 7 years ago

I realised that this stores the data as the labels in the options and not the values. Anyway to fix this?

lordfriend commented 7 years ago

What do you mean store value instead of name? Could you please provide a code snippet to show how you use this

andrewfam commented 7 years ago

from your example, the select stores the option names.

  1. {{option.name}}

This means that if i change the name, the value becomes lost. A normal select, as below, if you change the label Volvo to something else, at least the option is still selected

lordfriend commented 7 years ago

http://nya.io/nya-bootstrap-select/#!/examples/groups-and-more

Use data-value expression you can bind your model to some property of your option

ghiscoding commented 7 years ago

@lordfriend, I'm not sure if @andrewfam has the same issue as I have but it might be related.

So in my case if I use data-value="option.id" I lose the entire object since the ngModel is now only link to the id. I need the entire selected object structure for some other inputs in my form (not just the selected id). I don't see any option or other attribute that could keep the object model itself.

lordfriend commented 7 years ago

@ghiscoding If you need entire object being selected as model value. I shouldn't use data-value="option.id". by default you select is value is the left value of nya-bs-option="option in options"

ghiscoding commented 7 years ago

Thanks @lordfriend but the reason that I use data-value="option.id" is because I want the select to work with the form object that I pass. If I just use nya-bs-option="option in options" without data-value then the select is not automatically selected. I really need both the id link and the object itself, however with current plugin I need to choose 1 or the other but cannot have both :(

ghiscoding commented 7 years ago

@lordfriend thanks a lot for the help but I really need a reference to the full object. How can I have the entire object, while still having the selected value by it's option.id?

Basically, what comes from my backend server is a userId like userId: 2 and my collection of options is an array of objects.

For example, here's the collection of options

var users = [
  { id: 1, firstname: John, lastname: Doe }
  { id: 2, firstname: Jane, lastname: Doe }
];

Then let say the backend server tells me the id selected is 2. How can I select the 2nd value by the option.id? If I use the data-value="option.id" I lose the reference to the object since ngModel only holds the id 2. But if I remove the data-value then the dropdown does not select the 2nd value.

If I use this code, then the value get selected but I don't know what is the object unless I do an array search on the users collection.

selected object: {{ user }}  <!-- how to get selected user object??? -->
<ol class="nya-bs-select" ng-model="userId">
    <li nya-bs-option="option in users" data-value="option.id">
        <a>
            <span>{{option.firstname + ' ' + option.lastname}}</span>
        </a>
    </li>
</ol>

But if I do this code, then I have the reference to the object but the value doesn't get selected

selected object: {{ user }}
<ol class="nya-bs-select" ng-model="user">
    <li nya-bs-option="option in users">
        <a>
            <span>{{option.firstname + ' ' + option.lastname}}</span>
        </a>
    </li>
</ol>

I know that I can add an ngChange="findUser(users, userId)", but why do an extra step when your directive already know the option (user object)?

It would be very nice to have another attribute holding the object reference.

lordfriend commented 7 years ago

Please bind ngModel to userId and use data-value="option.id" then use ng-change="handleSelect()".

The reason why you shoud always give a clear element to bind is ngModel is a two-way binding. you must provide a value which can be select from option in order to let directive can select that value base on your model or update your model base on your selection.

The issue your faced is really not a case of what this directive care. use ng-change is enough to solve