How to keep single/multiple option values selected ? about angular-bootstrap-duallistbox

[frapontillo]

If you follow the example you can understand how to do it.
Your ng-model should be set to an array that contains the tracking properties for the array bound in ng-options.

<select
    ng-model="model"
    ng-options="obj as obj.text for obj in list track by obj.id"
...

[slimshadddyyy]

Sir, I am using the array to track properties, but unsure on following items

1. How to select specific object data viz, id or text ?
2. How to keep that specific option selected ?

<select
              ng-model="model"
              ng-options="obj as obj.text for obj in list track by obj.id"
              multiple
...
<h3>You have selected: {{model}}</h3> 

Shows You have selected: [{"id":"_1","text":"one"}], but not id or text.

[frapontillo]

Sorry, I forgot how the inner parts work, haven't worked on this for a while.

The first part tells you what's going into the model, in this case the whole obj, if you only want the IDs in the model, then use ng-options="obj.id as obj.text for obj in list track by obj.id"

[slimshadddyyy]

Okay, i can see obj.id selected, but not the options which are clicked do not move to right side.

See the image below

[frapontillo]

I need a live demo to help you with that. You can use plunker.

[slimshadddyyy]

here you go sir - http://plnkr.co/edit/gjGqAfXImH8tIW2stERj?p=preview

[frapontillo]

As I already told you, you do not have to put my directive twice. Just use the file in the dist folder, do not put the module again.

[slimshadddyyy]

Sir, pls let me know where I have put your directive twice and which file I am suppose to remove ? I have changed setting of plunker. You can now edit.

[frapontillo]

This is the proper way to do it: http://plnkr.co/edit/Yk49QLBZXGuT0ntASM4i?p=preview
Apparently you can't use the obj.id notation, the model will contain the whole object, but it works.

[slimshadddyyy]

Yes the model does contain the whole object. But then my question remains the same. On saving the form, how can I fetch selected (post) data and on editing the page, how can I make the options selected as asked above ?

[frapontillo]

You need to set your model yourself right after loading the list.

[slimshadddyyy]

I was able to achieve the above using ng-options="ugrp.id as ugrp.username for ugrp in userGroup" but how can I show already selected option values in _helper2 i.e. right side on page load ? Then user can again select few more from left side and then save it ?

Plunker - http://plnkr.co/edit/Yk49QLBZXGuT0ntASM4i?p=preview

[frapontillo]

You can't use ugrp.id, you need to use ugrp, please see my latest plunker I linked you. Did you open it?

[slimshadddyyy]

Sir, your plunker works well, but I need to fetch the id's for user group when form is submitted. So in my plunker it gives only id of usergroup like below

{"username":"911","firstname":"John","lastname":"P","email":"[email protected]","usergroup":["1","3"]}

But question is how to show that id 1,3 on right side i.e.

<select multiple="multiple" id="bootstrap-duallistbox-selected-list_" class="form-control" name="_helper2" style="height: 162px;"><option label="John" value="string:1" data-sortindex="0">John</option><option label="Doe" value="string:3" data-sortindex="1">Doe</option></select>

[frapontillo]

As I have already told you

You need to set your model yourself right after loading the list.

http://plnkr.co/edit/kJj2WB?p=preview

[slimshadddyyy]

How about showing more than one field selected on right side. Below code does not work.

 // THIS PRELOADS YOUR MODEL
    $scope.model = [{
        'id': '_1,_2',
        'text': 'one'
      }];

Or is there any other convention to use for multiple records ?

[slimshadddyyy]

Hi frapontillo,

if you could please respond to my above question, would be helpful,

Thanks.