ASM ASM - 2 months ago 8
AngularJS Question

How to display selected value of dropdown list in table on click of arrow

In the code below, it shows the selected value from dropdown list in another panel on click of the arrow and on clicking remove arrow it pushes it back to the same panel. how in the same code instead of pushing data to the panel(selected) can it push data to table inside the panel? With new data added to new row, each time arrow is clicked

<html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.js"></script>
<script src="https://code.angularjs.org/1.4.7/i18n/angular-locale_da.js"></script>
</head>

<body ng-app="app" ng-controller="MoveCtrl">

<div class="container">
<div class="panel-group">
<div class="panel panel-primary">
<div class="panel-heading">Available</div>
<div class="panel-body">
<select ng-model="availableList" multiple ng-options="x as x.name for x in available" style="width: 800px"></select>
</div>
</div>

<div ng-init="myVar = 'arrowBack.png'">
<img ng-src="{{myVar}}" style="height: 100px" value= "add" ng-click="moveItem(availableList[0], available,selected)">


<div ng-init="myVar = 'arrowForward.png'">
<img ng-src="{{myVar}}" style="height: 100px" value= "remove" ng-click="moveItem(selectedList[0], selected,available)">
</div>
</div>

<div class="panel panel-primary">
<div class="panel-heading">Selected</div>
<div class="panel-body">
<select ng-model="selectedList" multiple ng-options="x as x.name for x in selected" style="width: 800px"> </select>
</div>
</div>

</div>
</div>

<script>
angular.module('app', []).controller('MoveCtrl', function($scope) {


$scope.moveItem = function(item, from, to) {

console.log('Move item Item: '+item+' From:: '+from+' To:: '+to);

var idx=from.indexOf(item);
if (idx != -1) {
from.splice(idx, 1);
to.push(item);
}
};

$scope.selected= [];

$scope.available = [
{
id: 1,
name: 'bar'
},
{
id: 2,
name: 'foo'
},
{
id: 3,
name: 'goo'
}
];
});
</script>

</body>
</html>


It works like http://jsfiddle.net/f1pnw8cq/ .But instead of selected panel i need table there in which data will be pushed from available panel.

Answer Source

updated fiddle

You need to replace select with table in HTML.

<table>
   <tr ng-repeat="x in selected">
      <td>{{x.name}}</td>
   </tr>
</table>

this will add table in second panel.