下のコードでは、矢印のクリック時に別のパネルのドロップダウンリストから選択した値を表示し、矢印をクリックすると、パネル。同じコードで、パネル(選択)にデータをプッシュするのではなく、パネル内のテーブルにデータをプッシュできますか?新しいデータが新しい行に追加して、毎回の矢印は、それは私がそこにテーブルを必要とするデータが利用できるパネルからプッシュされます.But代わりに選択したパネルのhttp://jsfiddle.net/f1pnw8cq/のように動作します矢印のクリック時の表のドロップダウンリストの選択値の表示方法
<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>
をクリックします。あなたがHTMLでtable
でselect
を交換する必要が
あなたの質問は明確ではありません。[最小限の完全で検証可能な例](https://stackoverflow.com/help/mcve) –
を作成できますか?このhttp://jsfiddle.net/f1pnw8cq/を参照してください。 – ASM
'ng-option'を' ng-repeat'に置き換えてテーブル –