Fatema Rangwala Fatema Rangwala - 7 months ago 13
HTML Question

I want to move selected elements/ focused elements only from left to right using angular

I want to move elements from left to right only which are currently selected.
This is my current HTML code:

enter image description here

<select class="panel-body treeSection {{lhsTreeSectionClass}}"
multiple="multiple">
<option style="background-color: white;" onmouseover="this.style.background='#A4D3FF';"
onmouseout="this.style.background='#ffffff';"
ng-repeat="avData in lhsTreeAV"
ng-click="user_clicks_row(avData, $event)"> <!--Here on click of element I am calling controller method -->
{{avData}}</option>
</select>
</li>
</ul>
</select>


Here I am calling controller method and adding value to an array list when any element is selected but instead of it I want to add the values to list to copy it to right pane only when I select any element and press the > button.

This is my controller code:

$scope.user_clicks_row=function(avData, $event){
$scope.avValue.push(avData);
}


I want to pass only that elements to right side which are currently selected when I press > button for moving element from left to right.
Can someone please give me some pointers in solving this.

Answer

You can do it by binding your select to a model in Controller, this way you have the selected options.

Here's an example: JSFiddle

Edit

Fixed the Fiddle to iterate over the selected elements.